Question

实际目标：仅使用CSS为瓷砖，部分包含图像，雕刻/浮雕外观。

问题： 我尝试在瓷砖上使用四个带有透明度的嵌入式阴影来创建雕刻外观。不幸的是，四个半透明阴影在瓷砖的角落处相互重叠，产生了不希望的效果。

有没有办法防止盒子阴影在角落重叠？或者还有其他可行的方法来在这些瓷砖上实现透明的雕刻外观吗？

＆＃13;

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;
}

＆＃13;

<body>
    
<div class="engrave1"></div>
    <br/>
<div class="engrave2"></div>
    
</body>

＆＃13;

Answer 1

更新：我实际上看起来很不错。的 ==> DEMO

我在撰写这个问题时有了一个想法，但这不是一个非常优雅的解决方案。我在瓷砖中创建了4个子元素，而不是盒子阴影。孩子们被塑造成梯形，使得角落可以完美对齐。每个孩子都是单独定位并着色到代表方。

此方法的缺点：

如果不手动更改每个Trapezoid的规格
，则无法调整平铺大小
无法将模糊应用于伪'阴影'

看起来像是一个糟糕的powerpoint演示文稿或90年代的网站（可能会通过一些调整来修复）

不符合圆角

<强> ==> DEMO

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>

使用多个透明框阴影防止重叠角落

1 个答案: