知識儲備

1.box-shadow: 向框添加一個或多個陰影
參數：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的尺寸 陰影的顏色 內部/外部
Tips: 沒有實體區域，無法點擊

2.outline: 是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
參數：
outline-color 規定邊框的顏色
outline-style 規定邊框的樣式
outline-width 規定邊框的寬度
inherit 規定應該從父元素繼承 outline 屬性的設置。
Tips: 沒有實體區域，無法點擊

測試例子

1.用box-shadow/outline實現多邊框

html

<div class="div1"></div>

css
box-shadow解法

width: 200px;
height: 100px;

background-color: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

out-line解法

width: 200px;
height: 100px;

background-color: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

多邊框DIV

兩者的區別：1.box-shadow可以繪制多個邊框，而outline只能繪制一個邊框
???????????????????2.box-shadow遵守圓角特性，而outline遵守圓角特性

2.圓角特性測試
css
box-shadow解法

width: 200px;
height: 100px;

border-radius:5px;       //!圓角測試
background-color: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

out-line解法

width: 200px;
height: 100px;

border-radius:5px;       //!圓角測試
background-color: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

結果：
box-shadow

box-shadow遵守圓角特性

outline

outline不遵守圓角特性

小技巧：利用outline的直角特性制作一個裁縫布的效果
css

width: 200px;
height: 100px;

background-color: #655;
border-radius: 5px;
outline: 3px dashed #fff;
outline-offset: -15px; //！改變outline的位置

outline的直角

思考
在文章最開始提到了實體區域的問題，如何解決布局和點擊范圍？
1.將陰影設置為inset ? 給足夠的paddding ?
css

width: 200px;
height: 100px;

border-radius: 5px;
background-color: yellowgreen;
box-shadow: 0 0 0 5px deeppink inset, 0 0 0 15px #655 inset;
padding: 15px;

測試結果：

內邊框沒有圓角

我們可以看到內邊框和content區域沒有了圓角，但確實可以點擊
先寫到這里，看看有沒有更好的解決辦法？！