90507-106.jpg

要設(shè)置多重邊框夹纫，最要用到的是box-shadow這個樣式曲聂。

box-shadow 的作用是添加投影蜒车。

div {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: #c33;
    border: 10px solid #036;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 300px;
    box-shadow: 5px 5px 10px #888;
}

image.png

如果要設(shè)置多個陰影装黑，還可以用逗號進(jìn)行分別設(shè)置顾孽。

div {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: #c33;
    border: 10px solid #036;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 300px;
    box-shadow: 5px 5px 10px #888, 10px 10px 10px #9c0;
}

image.png

正常添加陰影的話达箍，填好以上參數(shù)就行剿涮。
box-shadow: 5px 5px 10px #888;

第一個參數(shù)：橫向偏移的值（負(fù)左主经，正右）

第二個參數(shù)：縱向偏移的值（負(fù)上毕谴，正下）

第三個參數(shù)：投影的半徑成畦，也就是羽化。值越大涝开，模糊和擴(kuò)散的程度越大循帐。

以上是添加陰影的基礎(chǔ)部分,下面開始制作多重邊框

多重邊框

要用 box-shadow 來設(shè)置多重邊框，需要用到 box-shadow 另一個不常用的參數(shù)（擴(kuò)張半徑）舀武，同時前3個參數(shù)要設(shè)置為0拄养。即偏移量和模糊值都為0。

div {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: #c33;
    border: 10px solid #036;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 300px;
    box-shadow: 0 0 0 10px #9c0;
}

image.png

如果需要設(shè)置多重邊框银舱，可以用逗號分隔語法瘪匿，這樣就可以創(chuàng)建任意數(shù)量的投影了。
box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf;

image.png

需要注意的是寻馏，box-shadow是層層疊加的棋弥，也就是說第一層投影位于頂層，以此類推诚欠。因此顽染，需要做的是按照這個規(guī)律來調(diào)整擴(kuò)張的半徑。

就比如在這個例子中聂薪，第一個投影用了10px家乘，第二個投影就要用大于10px的值才能看出效果，除非前一個投影設(shè)置了半透明顏色藏澳。

缺點：
用 box-shadow 設(shè)置的多重邊框最大的缺點就是不能設(shè)置虛線等其他樣式的邊框仁锯。

outline

如果只是需要2層邊框，可以先設(shè)置一層常規(guī)邊框（border）翔悠，再加上outline（描邊）屬性來產(chǎn)生外層的邊框业崖。

outline 設(shè)置參數(shù)的方法和 border 是一樣的。

    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: #c33;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 300px;
    border: 10px solid #036;
    outline: 10px solid #9c0;

image.png

outline還可以設(shè)置成虛線蓄愁，同時通過 outline-offset 可以設(shè)置 outline和元素邊緣之間的距離双炕。

    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: #369;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 300px;
    outline: 2px dashed #fff;
    outline-offset: -16px;

image.png

outline 設(shè)置成 2像素的白色虛線。
通過 outline-offset 方法把 outline 設(shè)置在元素內(nèi)部（負(fù)值）撮抓，此時看上去就有點像是縫邊的效果妇斤。

缺點：
用outline設(shè)置的邊框不能產(chǎn)生圓角效果。也就是不會貼合元素的圓角。

image.png

希望以上筆記對大家有幫助站超。