CSS經過描邊獲得雙層邊框

有時候，咱們在寫頁面效果時，爲了達到雙層邊框的效果，（以下），首先想到的作法是用一個外層div嵌套內層的div，雖然這是一種很廣泛的解決方法，可是會增長代碼量也會比較冗餘，今天看到一個css屬性，outline，即給div添加一個outline的屬性便可獲得雙層邊框，固然，這個屬性是CSS2版本就有的，平時我常常忽略到它，今天猛然發現，是一個很不錯的屬性。還有就是css3版本有一個outline-offset屬性，outline-offset 屬性對輪廓進行偏移，並在邊框邊緣進行繪製。

輪廓在兩方面與邊框不一樣：

• 輪廓不佔用空間
• 輪廓多是非矩形

綜上，獲得雙層邊框能夠：

【法一】：div {outline: 10px outset red;}同時能夠給輪廓加一個偏移。

可是這種方法有一個弊端，就是若是div有圓角的話，會顯示成以下：

【法二】：當邊框出現圓角化時，就有另一種方法來解決：

    div {box-shadow: 0 0 0 10px green;}效果以下：

這個纔是咱們想要的。通常來講CSS3中的box-shadow是有四個屬性值，分別是X和Y的偏移量，模糊度以及顏色，但在這兒咱們用了5個屬性值，分別爲X和Y的偏移量，模糊度，投影向外擴張的程度，顏色值。實際上，最外層顯出來的邊框並非真正的邊框，而是投影。

 

 

【小知識】：

box-shadow 除了接受一個值之外，還能夠接受一個列表值（逗號分隔），如：

div {

    box-shadow: 0 0 0 10px green,
                         0 0 0 20px yellow,
                         0 0 0 30px orange;

}

這個屬性的好處是，擴張的繪製規則是根據元素樣式自己的樣式來繪製的，元素是矩形，用box-shadow繪製出來的就是規矩的矩形，若是元素是帶圓角的，則繪製出來的輪廓就是帶圓角的。