CSS多邊框
Backgrounds & Borders Level 3 還是一份草案的時候，CSS WG 就在是否支持多重邊框的問題進行了大量的探討，就像是討論多重背景圖片一樣。不幸的是，當時認為多重邊框的用處并不大，即使需要也可以使用border-image屬性來模擬。不過，WG顯然忘記了在 CSS 代碼中靈活地調整邊框，才是我們需要的，現在開發者只能使用一些Hack手段來模擬多重邊框，比如使用多重元素的嵌套來模擬多重邊框。現在，我將告訴你一些更優秀的方法，無需使用多余的標簽即可實現多重邊框。
box-shadow解決方案
現在，大多數的時候都用box-shadow來創建陰影。不過，很少有人知道它還接受第四個參數（spread），該參數可以縮放陰影的范圍。比如下面的示例，我們創建了一個水平和垂直偏移量為0 的陰影，它就使用了上述所說的第四個參數：
效果如下圖所示：
圖注：使用 box-shadow 模擬邊框線
這還不夠令人驚訝，因為它和我們使用 border 創建的邊框差不多。不過，強大的是我們可以使用逗號來創建任意數量的陰影。所以，只需要繼續添加陰影就可以實現多重陰影了，比如，添加一個顏色為 deeppink 的邊框：
唯一需要牢記的事情就是，box-shadow 屬性是疊在一起的，第一個陰影總是位于最頂層，所以你需要調整陰影的大小。比如，在上一段代碼中，我們希望最外層的邊框為 5px，那么我們就可以設置一個 15px(10px + 5px) 的陰影。如果你需要，那么就可以為指定任意層次的陰影：
除了下述的少數情況外，使用 box-shadow 的解決方案都很好用：
陰影并不是邊框，它們并不占有實際的空間，也不能歸屬于 box-sizing 的范圍。不過，你可以通過使用內邊距或外邊距（取決于陰影是內部的還是外部的）占據額外的空間來模擬。
新聞熱點
疑難解答
