如何给元素和元素的长方体阴影添加相同的边框半径
如何给元素和元素的长方体阴影添加相同的边框半径
提问于 2017-06-29 23:11:21
我有一个元素，我在其上添加了两个长方体阴影，我希望元素的角点和长方体阴影具有相同的边界半径。不知怎么的，这并没有发生。元素的边界半径与第一个长方体阴影不同，第一个长方体阴影的边界半径与第二个长方体阴影不同。
代码如下：
.stack_item{
overflow: hidden;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
transform: translate(-50%, 9%);
-webkit-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
-moz-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
}回答 1
Stack Overflow用户
发布于 2017-06-30 01:10:57
因为你正在缩小你的阴影，所以边界半径也在缩小。
在更大的伪元素上设置它，就可以了
.stack_item{
width: 200px;
height: 100px;
position: relative;
border: solid 1px black;
border-radius: 10px 10px 10px 10px;
margin-top: 50px;
background-color: white;
}
.stack_item:before,
.stack_item:after {
content: "";
position: absolute;
top: 0px;
bottom: 50px;
border-radius: inherit;
}
.stack_item:before {
left: 7px;
right: 7px;
box-shadow: 0px -8px 0px 0px rgb(206, 204, 204);
z-index: -1;
}
.stack_item:after {
left: 13px;
right: 13px;
box-shadow: 0px -16px 0px 0px rgb(168, 168, 168);
z-index: -2;
}<div class="stack_item"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44828951
复制相关文章
相似问题
腾讯云开发者
