提问人：YEL 提问时间：9/6/2023 更新时间：9/8/2023 访问量：46
如何设置第二层框阴影的样式，使其具有与第一层相同的边框半径
How to style the second layer of box shadow to have the same border-radius as the first layer
问：
这是 css
body {
font-family: sans-serif;
border: solid 1px;
padding: 10px;
border-radius: 20px;
box-shadow: rgb(195, 197, 199) 0px 23px 0px -15px,
rgb(217, 217, 213) 0px 45px 0px -30px;
}
如下图所示，第二层的边框半径不是从父层的边框半径继承而来的。
提前感谢您的帮助。
答：
0赞
Christoph Kern
9/6/2023
#1
我曾经遇到过同样的问题，但经过大量测试后，它从未真正像我想要的那样工作。
我设法解决我的问题的唯一方法是通过：after伪元素添加第一个阴影，然后添加另一个阴影。
0赞
Brett Donald
9/7/2023
#2
散布半径的负值会减小阴影的大小。按比例减小阴影的边界半径是有道理的，但似乎边框半径的减小幅度超过了应有的程度。在这种情况下，它肯定不会产生您想要的视觉效果。
最简单的解决方法可能是减小负传播半径，或增加边界半径。其中任何一个都会导致更圆润的阴影角。
p {
font-family: sans-serif;
font-size: 1.5em;
border: solid 1px;
padding: 10px 20px;
border-radius: 15px;
box-shadow: rgb(195, 197, 199) 0 20px 0 0, rgb(217, 217, 213) 0 40px 0 0;
margin-bottom: 2.5em;
}
.p2 {
box-shadow: rgb(195, 197, 199) 0 20px 0 -4px, rgb(217, 217, 213) 0 40px 0 -8px;
}
.p3 {
box-shadow: rgb(195, 197, 199) 0 20px 0 -8px, rgb(217, 217, 213) 0 40px 0 -16px;
}
.p4 {
box-shadow: rgb(195, 197, 199) 0 20px 0 -8px, rgb(217, 217, 213) 0 40px 0 -16px;
border-radius: 100px;
}<p>Test 1, zero spread</p>
<p class="p2">Test 2, small negative spread</p>
<p class="p3">Test 3, large negative spread</p>
<p class="p4">Test 4, large negative spread & border radius</p>或者，正如@CristophKern所说，您可以使用伪元素来代替它，它可以让您更好地控制它们的位置和形状。box-shadow
p {
font-family: sans-serif;
font-size: 1.5em;
border: solid 1px;
padding: 10px 20px;
border-radius: 15px;
position: relative;
background: rgb(255, 255, 255, 0.8);
}
p::before, p::after {
content: '';
position: absolute;
height: 100%;
border-radius: 15px;
}
p::before {
top: 20px;
left: 3%;
width: 94%;
background: rgb(195, 197, 199);
z-index: -1;
}
p::after {
top: 40px;
left: 6%;
width: 88%;
background: rgb(217, 217, 213);
z-index: -2;
}<p>Test 5, pseudo elements</p>
评论