如何將相同的邊框半徑添加到元素的元素和框陰影

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>