侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

CSS玻璃略微折叠边框3D效果

2023-05-08 星期一 / 0 评论 / 0 点赞 / 48 阅读 / 1266 字

我试图使用CSS获得类似的外观(见下图).这使得所有边框都略微折叠并具有精简3D外观.我尝试使用box-shadow并粘贴下面的代码.这给了我一些类似的形状,但不能得到很好的一个,并使用两个DIV来获

... . . 我试图使用CSS获得类似的外观(见下图).这使得所有边框都略微折叠并具有精简3D外观.我尝试使用box-shadow并粘贴下面的代码.这给了我一些类似的形状,但不能得到很好的一个,并使用两个DIV来获得这种效果.我们可以使用单个DIV ..?谢谢

.div-1 {  width:150px;  height:300px;  box-shadow: 0 3px 6px rgba(0,0.16),0 3px 6px rgba(0,0.23);  border-radius: 10px; }.div-2 {  width:100%;  height:100%;  box-shadow: width:100%;height:100%;box-shadow: 0 0 5px #aaa inset;  border-radius: 10px;}
<!DOCTYPE html><html><body>  <div class="div-1">    <div class="div-2"></div>  </div></body></html>
.

解决方法

. 我想你可以这样:

.div-1 {  width:150px;  height:300px;  box-shadow: inset 0 3px 6px rgba(0,0 4px 6px rgba(0,0.45);  border-radius: 10px; }
<!DOCTYPE html><html><body>  <div class="div-1">  </div></body></html>
. . .. ...

广告 广告

评论区