-2

我在 Codepen 上看到了这段代码。它是一个更大项目的一部分。我的问题是为什么 box-shadow 有两组“插入”属性？两者的功能相同吗？我可以删除其中一个吗？在此先感谢您的帮助！！

链接到原始项目：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);
}
4

2 回答 2

3

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

这个网站有一些关于box-shadow样式的好信息：

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

.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);
}
<div class="trapdoor">First inset is blue</div>
<div class="trapdoor2">Second is red</div>

于 2015-12-08T06:42:14.317 回答
1

声明了两种inset样式来覆盖元素的两侧，提供所需的正确对比度，提供 3d/透视效果。
声明它们并平等地抵消它们是我们在物体上自然观察到的事情，尽管观察结果并不总是一致的。
如果您愿意，您可以删除一个，但是当您这样做时，您会注意到您的元素现在只有一侧具有复杂的阴影样式......如果需要，那么您会很高兴。
“它们是否具有相同的功能”
当然，它们是相同的 css 属性声明；唯一的区别是插入阴影声明之后的 x 轴偏移值。在这种情况下，一个是左侧 -7 像素，而另一个是右侧 7 个像素。

于 2015-12-08T06:41:25.887 回答