outline 方案
背景知識：box-shadow的基本用法，outline基本用法
/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */box-shadow
: 2px 2px 2px 1px rgba
(0, 0, 0, 0.2)
;
將x偏移量 ，y偏移量設定為0px，此時陰影會在元素下面不會超出元素本身。
模糊度設為0px，使陰影呈現實體效果。
增大擴散半徑，可以理解為陰影向外擴充套件半徑。
此時陰影就像一條寬度為擴散半徑的實線邊框
box-shadow屬性可以通過逗號分割新增多條陰影。
要注意的是，陰影是層層疊加的，第一條陰影在最上層，以此類推，且陰影的半徑都是以元素border的外邊沿為起點。所以如果你想要兩條寬20px的陰影，那麼兩條陰影的擴散半徑需要分別設定20px，40px我們需要注意的是，陰影不會影響元素的布局，我們可以從它的字面意思，陰影來理解，它不占用任何空間。並且元素上的繫結事件，並不會在陰影上觸發。效果如圖
那麼如果我們需要陰影像我們預期的一樣，跟border有相同的表現，我們可以增加同樣的外邊框margin來模擬出陰影佔據的空間。
目前來講，陰影的擴充套件方向都是從border外邊沿向外擴。它雖然模擬出了空間，但是仍舊不會觸發元素上的事件，如果你想在事件上也同border的表現一樣，那麼可以設定inset屬性，使其向內擴散，並通過內邊距padding來模擬空間。
需要注意的是，邊框的順序發生了反轉。如果陰影邊框設定了透明度，因為涉及到透明度顏色疊加，需要自己取色。同樣的透明度也會被背景色穿透，如果不想被背景色影響，可設定background-clip: content-box;outline可以實現兩條邊框的方案，同時更加靈活可以實現虛線邊框。
border 和 outline 很類似，但有如下區別：
輪廓不佔據空間（同陰影），繪製於元素內容周圍。
outline不一定貼合圓角。
我們可以通過outline-offset設定負值，來使輪廓顯示在元素內部。
border
: 10px solid blue;
outline
: 10px solid skyblue;
不貼合圓角
outline-offset屬性實現的縫邊效果
background-color
: #333;
outline
: 2px dashed white;
border-radius
: 20px;
outline-offset
: -30px;
CSS揭秘 案例2 多重邊框
定義和用法 box shadow 屬性向框新增乙個或多個陰影 語法 box shadow h shadow v shadow blur spread color inset 值描述 h shadow 必需。水平陰影的位置。如果值為正值，則陰影在物件的右邊，反之其值為負值時，陰影在物件的左邊。v sh...
CSS揭秘 背景與邊框（2） 多重邊框
有些情況下，為了滿足一些要求，普通的邊框有點達不到我們的需求，這時我們可以使用多重邊框。box shadow屬性可以設定乙個或多個下拉陰影的框。語法 box shadow h shadow v shadow blur spread color inset 值 說明h shadow 必需的。水平陰影的...
css 揭秘 CSS揭秘 技巧（二） 多重邊框
原始碼都在這上面哦！喜歡的給我乙個星吧 問題 我們通常希望在css 層面以更靈活的方式來調整邊框樣式 目前為止，我們大多數人可能已經用過 或者濫用過 box shadow來生成投影，不太為人之的是，它還接受四個引數 擴張半徑 通過制定正值或負值，可以讓投影面積加大或者減小,h shadow 必需。水...