box-shadow實現多重邊框和outline實現虛線疊加邊框

css3中定義了許多的新特性，極大的豐富了css的表現力。本片博文意在探討其中的新特性box-shadow。

box-shadow語法如下

box-shadow: h-shadow v-shadow blur spread color inset;

利用box-shadow可以生成投影，增加立體感。但是巧用box-shadow的spread(擴張半徑)屬性也可以實現多重邊框效果。

傳統的多重邊框可以通過元素的多層嵌套實現。對各嵌套元素分別設置邊框，稍加調整就可實現多重邊框效果，但該方法會導致元素嵌套關系混亂，增加許多無意義的標簽。

使用box-shadow特性，將兩個偏移量 h-shadow 、v-shadow設置為0，將模糊值blur也設置為0，此時增加擴張半徑，就會使元素的投影變為實線邊框。即

.moreborder
{
    position: absolute;
    top: 30%;
    left: 30%;

    width: 20em;
    height: 10em;

    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 10px #D73C51,
}

此時可以發現在元素外圍生成了一圈邊框。但如果想要生成多重邊框，就需要了解box-shadow實際支持分隔語法，可以使用逗號來生成多重投影，同樣利用這個特性，可以生成多重邊框。即

.moreborder
{
    position: absolute;
    top: 30%;
    left: 30%;

    width: 20em;
    height: 10em;

    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 10px #D73C51,
    0 0 0 15px #FFCD47,
    0 2px 5px 15px rgba(0,0,0,.6);
}

這樣就生成了兩重邊框，在為該元素增加陰影，使其看起來更加立體。同理可以設置三層，四層…

如需要邊框生成在內圈，只需要在最后將默認的外部陰影改變為內部陰影inset

但是同時也應意識到該”邊框”不是真正的邊框，他只是元素的自身投影，使用firebug查看此元素，也可以看到border值為0，因此它不受很多屬性的影響。但同時因為該邊框為自身投影，因此當你改變元素本身形狀，例如設置圓角border-radius時不會出現邊框無法貼合元素的情況。

 

outline 方案

　　在某些情況下，你可能只需要兩層邊框，那就可以先設置一層常規邊框，再加上 outline（描邊）屬性來產生外層的邊框。這種方法的一大優

點在於邊框樣式十分靈活，不像上面的 box-shadow 方案只能模擬實線邊框（假設我們需要產生虛線邊框效果，box-shadow 就沒轍了）。

 

 對一層 dashed（虛線）描邊使用負 的 outline-offset 后， 可以得到簡單的縫邊效果

    background: #655;
    border: 1px dashed #fff;
    outline: 10px solid #655;

可以通過 outline-offset 屬性來控制它跟元素邊緣之間的間距

 

 

    border: 1px dashed #333;
    outline: 10px solid #666;
    outline-offset: -20px;

 

拓展-邊框內圓角

只用box-shadow 邊框也會跟着圓角

 

加上outline可以填補外邊框圓角

 

 

 

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;