0

实际目标：仅使用 CSS 为瓷砖（一些包含图像）提供雕刻/浮雕外观。

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

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

==> 演示

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>

4

1 回答 1

0

更新：我实际上让它看起来很不错。==> 演示

我在写这个问题时有一个想法，但这不是一个非常优雅的解决方案。我在 tile 中创建了 4 个子元素，而不是 box-shadows。孩子们被塑造成梯形，以便角落可以完美对齐。每个孩子都被单独定位并为其代表侧着色。

这种方法的缺点：

  • 无法在不手动更改每个梯形的规格的情况下调整图块大小
  • 无法对伪“阴影”应用模糊
  • 看起来像是来自糟糕的 powerpoint 演示文稿或 90 年代网站的东西（可能会通过一些调整来修复）
  • 不符合圆角

==> 演示

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>

于 2015-02-28T09:14:28.533 回答