CSS3中的框的多層邊框

Question

我正在尋找一種正確的方法，在下面的圖片中突出顯示一個效果，在我的CSS3底部框中輸入 。

Answer 1

用陰影獲得這種效果將有問題，如果你降低陰影的大小邊框半徑將減少。可以解決，但它是相當複雜的。

你最好的選擇是使用僞元素此

.test { 
 
    width: 300px; 
 
    height: 100px; 
 
    border: solid 1px green; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    background-color: white; 
 
} 
 

 
.test:after, .test:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: inherit; 
 
    border-radius: inherit; 
 
    background-color: white; 
 
    height: 50px; 
 
} 
 

 
.test:after { 
 
    left: 6px; 
 
    right: 6px; 
 
    bottom: -6px; 
 
    z-index: -1; 
 
} 
 
.test:before { 
 
    left: 14px; 
 
    right: 14px; 
 
    bottom: -12px; 
 
    z-index: -2; 
 
}

<div class="test"></div>

Answer 2

試過箱陰影？您可以多次使用陰影陰影並控制其位置。例如：

box-shadow: 1px 1px 1px #color of your choice, (comma for another shadow) 2px 2px 2px #color of your choice, (and on as much as you want); 

您可以添加另一個值，如1px 1px 1px 1px black。第四個代表陰影的大小。 我希望這可以幫助，或者如果你可以更具體:)