(1) box-shadow方案

box-shadow支持逗號分隔，我們可以創建任意數量的投影。

它不會影響布局，也不會受到box-sizing的影響。

創建的假“邊框”出現在元素的圈外，不會影響鼠標事件。但是可以通過給box-shadow屬性加上insert關鍵字，使投影繪制在元素的圈內。

注意：它是層層疊加的，因此需要調整擴張半徑。

body {background: url("xxxx.jpg") ;}div {margin: 100px;width: 200px;height: 200px;background: yellowgreen;box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 0 0 20px rgba(0,0,0,.2);} 復制代碼

效果如圖：

(2) outline方案

如果只需要兩層邊框，那么你完全可以使用border+outline來實現，這一方法的優點在于邊框樣式十分靈活（比如虛線邊框）。

body {background: url("xxxx.jpg") ;}div {margin: 100px;width: 200px;height: 200px;background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;} 復制代碼

轉載于:https://juejin.im/post/5c6ce8ce6fb9a049fb443de6

總結

以上是生活随笔為你收集整理的css学习笔记2--多重边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。