实际目标:仅使用 CSS 为瓷砖(一些包含图像)提供雕刻/浮雕外观。
问题: 我试图在瓷砖上使用四个具有透明度的嵌入框阴影来创建雕刻外观。不幸的是，四个半透明阴影在图 block 的 Angular 处相互重叠，产生了不良效果。
有没有办法防止盒子阴影在 Angular 落重叠？或者是否有任何其他可行的方法可以在这些瓷砖上实现透明雕刻外观？
body {background-color: #1E1E1E;}
.engrave1 {
background-color: #222;
width: 150px; height: 150px;
box-shadow: 0px 5px 2px 0px RGBa(0,0,0,0.3) inset,
-5px 0px 2px 0px RGBa(100,100,100,0.3) inset,
0px -5px 2px 0px RGBa(140,140,140,0.3) inset,
5px 0px 2px 0px RGBa(90,90,90,0.3) inset;
}
.engrave2 {
background-color: #222;
width: 150px; height: 150px;
border-radius: 8px;
box-shadow: 0px 9px 2px 0px RGBa(0,0,0,0.3) inset,
-9px 0px 2px 0px RGBa(100,100,100,0.3) inset,
0px -9px 2px 0px RGBa(140,140,140,0.3) inset,
9px 0px 2px 0px RGBa(90,90,90,0.3) inset;
}<body>
<div class="engrave1"></div>
<br/>
<div class="engrave2"></div>
</body>最佳答案
更新:我实际上让它看起来很不错。 <强> ==> DEMO
我在写这个问题时有一个想法，但这不是一个非常优雅的解决方案。 我在图 block 中创建了 4 个子元素，而不是框阴影。 children 被塑造成梯形，这样 Angular 就可以完美对齐。每个 child 都被单独定位并在其代表的一侧着色。
这种方法的缺点:
- 无法在不手动更改每个梯形的规范的情况下调整图 block 的大小
- 不能对伪“阴影”应用模糊
- 看起来像是来自糟糕的 powerpoint 演示文稿或 90 年代网站的东西(可能会通过一些调整得到修复)
- 不符合圆 Angular
body {background-color: #1E1E1E;}
.engrave1 {
position: relative;
background-color: #222;
width: 150px; height: 150px;
background-image: url(http://lorempizza.com/150/150);
}
.engrave2 {
position: relative;
width: 150px; height: 150px;
background-image: url(http://lorempizza.com/150/150);
border-radius: 8px;
overflow: hidden; /*hides overflowing pseudoshadows*/
}
.engrave3 {
position: relative;
width: 150px; height: 150px;
border-radius: 8px;
overflow: hidden; /*hides overflowing pseudoshadows*/
}
.engrave4 {
position: relative;
width: 150px; height: 150px;
}
.pseudoshadow {
position: absolute;
}
.pseudoshadow.cover { /*just for extra looks */
top: 5px; left: 5px;
width: 140px; height: 140px;
background-color: RGBa(0,0,0,0.1);
}
.pseudoshadow.top {
top: 0;
border-top: 5px solid RGBA(0,0,0,0.4);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 140px;
}
.pseudoshadow.right {
top: 0;
right: 0;
border-right: 5px solid RGBA(0,0,0,0.2);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
width: 0;
height: 140px;
}
.pseudoshadow.bottom {
bottom: 0;
border-bottom: 5px solid RGBA(255,255,255,0.05);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 140px;
}
.pseudoshadow.left {
top: 0;
left: 0;
border-left: 5px solid RGBA(0,0,0,0.2);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
width: 0;
height: 140px;
}<body>
<div class="engrave1">
<div class="pseudoshadow cover"></div>
<div class="pseudoshadow top"></div>
<div class="pseudoshadow right"></div>
<div class="pseudoshadow bottom"></div>
<div class="pseudoshadow left"></div>
</div>
<br/>
<div class="engrave2">
<div class="pseudoshadow cover"></div>
<div class="pseudoshadow top"></div>
<div class="pseudoshadow right"></div>
<div class="pseudoshadow bottom"></div>
<div class="pseudoshadow left"></div>
</div>
<br/>
<div class="engrave3">
<div class="pseudoshadow cover"></div>
<div class="pseudoshadow top"></div>
<div class="pseudoshadow right"></div>
<div class="pseudoshadow bottom"></div>
<div class="pseudoshadow left"></div>
</div>
<br/>
<div class="engrave4">
<div class="pseudoshadow cover"></div>
<div class="pseudoshadow top"></div>
<div class="pseudoshadow right"></div>
<div class="pseudoshadow bottom"></div>
<div class="pseudoshadow left"></div>
</div>
</body>关于html - 使用多个透明框阴影防止重叠 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28780065/