知識(shí)儲(chǔ)備

1.box-shadow: 向框添加一個(gè)或多個(gè)陰影
參數(shù)：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的尺寸 陰影的顏色 內(nèi)部/外部
Tips: 沒(méi)有實(shí)體區(qū)域，無(wú)法點(diǎn)擊

2.outline: 是繪制于元素周?chē)囊粭l線(xiàn)，位于邊框邊緣的外圍，可起到突出元素的作用
參數(shù)：
outline-color 規(guī)定邊框的顏色
outline-style 規(guī)定邊框的樣式
outline-width 規(guī)定邊框的寬度
inherit 規(guī)定應(yīng)該從父元素繼承 outline 屬性的設(shè)置。
Tips: 沒(méi)有實(shí)體區(qū)域，無(wú)法點(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;

多邊框DIV

兩者的區(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

box-shadow遵守圓角特性

outline

outline不遵守圓角特性

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

width: 200px;
height: 100px;

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

outline的直角

思考
在文章最開(kāi)始提到了實(shí)體區(qū)域的問(wèn)題，如何解決布局和點(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)邊框沒(méi)有圓角

我們可以看到內(nèi)邊框和content區(qū)域沒(méi)有了圓角，但確實(shí)可以點(diǎn)擊
先寫(xiě)到這里，看看有沒(méi)有更好的解決辦法？！