Question

我在Codepen上看到了这段代码。它是一个更大项目的一部分。我的问题是为什么有两套＆＃34;插入＆＃34;盒子阴影的属性？它们都具有相同的功能吗？我可以删除其中一个吗？在此先感谢您的帮助!!

链接到原始项目：http://codepen.io/tholman/pen/BLeJs

.trapdoor {

position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -25px;
width: 200px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
transition: background 400ms ease-in-out;
box-shadow: inset -7px 0px 12px -8px rgba(0, 0, 0, 0.3), inset 7px 0px 12px -8px rgba(0, 0, 0, 0.3);
}

Answer 1

答案：基本上：＆＃34; box-shadow属性将一个或多个阴影效果描述为以逗号分隔的列表。＆＃34; 在你的代码示例中，第一个插图是右边，第二个插图是左边，阴影很难看到，因为不透明度设置为0.3我已经包含一个示例代码，显示相同的插图，但颜色为蓝色和红色。

本网站提供了box-shadow风格的一些很好的信息：

这是一个CodePen，显示了该类的变体： http://codepen.io/ctwoodwa/pen/PZwOwQ

＆＃13;

.trapdoor {
position: absolute;
top: 50%;
left: 25%;
margin-left: -100px;
margin-top: -25px;
width: 200px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
transition: background 400ms ease-in-out;
box-shadow: inset -7px 0px 12px -8px rgba(0, 0, 255, 1), inset 7px 0px 12px -8px rgba(255, 0, 0, 1);
}
.trapdoor2 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -25px;
width: 200px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
transition: background 400ms ease-in-out;
box-shadow: inset -7px 0px 12px -8px rgba(255, 0, 0, 1);
}

＆＃13;

<div class="trapdoor">First inset is blue</div>
<div class="trapdoor2">Second is red</div>

＆＃13;

Answer 2

声明有两个inset样式覆盖元素的两侧，提供所需的正确对比度，从而产生3d /透视效果。
声明它们并将它们平均抵消是我们在物体上自然观察到的东西，尽管观察结果并不总是一致的。
如果你愿意，你可以删除一个，但是当你这样做时你会注意到你的元素现在只有一个复杂的阴影风格...如果需要，那么你会很高兴。<登记/> ＆＃34;他们两个都有相同的功能＆＃34;
当然，他们是同一个css财产声明;唯一的区别是插入阴影声明后面的x轴偏移值。在这种情况下，一个是-7像素，而另一个是7像素。

Box-shadow：插入属性css

2 个答案: