原始碼都在這上面哦！
喜歡的給我乙個星吧
問題：我們通常希望在css**層面以更靈活的方式來調整邊框樣式
目前為止，我們大多數人可能已經用過（或者濫用過）box-shadow來生成投影，不太為人之的是，它還接受四個引數（擴張半徑），通過制定正值或負值，可以讓投影面積加大或者減小,
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊距離。
spread 可選。陰影的尺寸。
color 可選。陰影的顏色。請參閱 css 顏色值。
inset 可選。將外部陰影 (outset) 改為內部陰影。
建立多重邊框，**如下
效果圖：
在某種情況下，你可能只需要兩層邊框，那就可以設定一層常規邊框，再加上outline（描邊） 屬性來產生外層的邊框，這種方法的優點是邊框的樣式十分靈活，不像上面的box-shadow方案 模擬實線邊框（假設我們需要的產生虛線邊框效果，box-shadow 就不可做到）
知識背景：outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
注釋：輪廓線不會佔據空間，也不一定是矩形。
outline-color 規定邊框的顏色。
outline-style 規定邊框的樣式。
outline-width 規定邊框的寬度。
inherit 規定應該從父元素繼承 outline 屬性的設定。
建立多重邊框，**如下
效果對比圖
還想說一點的是改變outline-offset值，可以實現很簡單的縫邊效果
是不是很奇妙！（就我這個智障這樣想吧！），我想說的是多去思考，多去嘗試，一切皆有可能啊！
這種outline方案，只適合雙層邊框的場景，outline不接受用逗號分隔多個值，邊框不一定會貼合border-radius 屬性產生的圓角，因此如果元素是圓角，它的描邊可能是直角的。在絕大多數的情況下，描邊都是矩形的。
後言：如果你對基礎的知識點已經很熟悉，你可以自動跳過。寫上去的原因是查漏補缺，鞏固一下基礎。
如果有不對的地方，歡迎你來吐槽。
本文主要參考《css 揭秘》一書 以及w3school；
參考鏈結 ：
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...
CSS揭秘 2 多重邊框
outline 方案 背景知識 box shadow的基本用法，outline基本用法 x偏移量 y偏移量 陰影模糊半徑 陰影擴散半徑 陰影顏色 box shadow 2px 2px 2px 1px rgba 0,0,0,0.2 以上是box shadow的基本引數。box shadow是為元素新增...