知識儲備
1.box-shadow: 向框添加一個或多個陰影
參數(shù)：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的尺寸 陰影的顏色 內(nèi)部/外部
Tips: 沒有實體區(qū)域，無法點擊
2.outline: 是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
參數(shù)：
outline-color 規(guī)定邊框的顏色
outline-style 規(guī)定邊框的樣式
outline-width 規(guī)定邊框的寬度
inherit 規(guī)定應該從父元素繼承 outline 屬性的設置。
Tips: 沒有實體區(qū)域，無法點擊
測試例子
1.用box-shadow/outline實現(xiàn)多邊框
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
兩者的區(qū)別：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;
結(jié)果：
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的直角
思考
在文章最開始提到了實體區(qū)域的問題，如何解決布局和點擊范圍？
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;
測試結(jié)果：
內(nèi)邊框沒有圓角
我們可以看到內(nèi)邊框和content區(qū)域沒有了圓角，但確實可以點擊
先寫到這里，看看有沒有更好的解決辦法？！
