知識(shí)儲(chǔ)備
1.box-shadow: 向框添加一個(gè)或多個(gè)陰影
參數(shù)：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的尺寸 陰影的顏色 內(nèi)部/外部
Tips: 沒有實(shí)體區(qū)域寸谜，無法點(diǎn)擊
2.outline: 是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
參數(shù)：
outline-color 規(guī)定邊框的顏色
outline-style 規(guī)定邊框的樣式
outline-width 規(guī)定邊框的寬度
inherit 規(guī)定應(yīng)該從父元素繼承 outline 屬性的設(shè)置。
Tips: 沒有實(shí)體區(qū)域，無法點(diǎn)擊
測(cè)試?yán)?/h2>
1.用box-shadow/outline實(shí)現(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;
兩者的區(qū)別：1.box-shadow可以繪制多個(gè)邊框带射，而outline只能繪制一個(gè)邊框
???????????????????2.box-shadow遵守圓角特性，而outline遵守圓角特性
2.圓角特性測(cè)試
css
box-shadow解法
width: 200px;
height: 100px;
border-radius:5px; //!圓角測(cè)試
background-color: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
out-line解法
width: 200px;
height: 100px;
border-radius:5px; //!圓角測(cè)試
background-color: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
結(jié)果：
box-shadow
outline
小技巧：利用outline的直角特性制作一個(gè)裁縫布的效果
css
width: 200px;
height: 100px;
background-color: #655;
border-radius: 5px;
outline: 3px dashed #fff;
outline-offset: -15px; //稚矿！改變outline的位置
思考
在文章最開始提到了實(shí)體區(qū)域的問題庸诱，如何解決布局和點(diǎn)擊范圍？
1.將陰影設(shè)置為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;
測(cè)試結(jié)果：
我們可以看到內(nèi)邊框和content區(qū)域沒有了圓角晤揣，但確實(shí)可以點(diǎn)擊
先寫到這里桥爽，看看有沒有更好的解決辦法？昧识！
