如何将相同的边框半径添加到元素的元素和框阴影

Question

我有一个元素，我添加了两个阴影框，我希望元素的角和框阴影具有相同的边框半径。不知何故，它没有发生。 该元素与第一个box-shadow具有不同的边界半径，并且第一个box-shadow与第二个box-shadow具有不同的边界半径。

下面的代码：

.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); 
} 

Answer 1

既然你正在你的影子萎缩，边界半径也被缩小。

将其设置一个较大的假体上，这将是确定

.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>