前言

最近在工作中遇到一個值得思考的問題，在CSS中，要實現同一種效果可能有很多種方式，就比如今天所要講的多重邊框，有人可能會想，那還不簡單？要多少邊框直接嵌套多少個帶邊框的DIV元素不就行了么！

是的，這樣確實簡單粗暴，但是也會因此產生很多毫無實際意義的元素。

事實上，要實現同樣效果，一個元素足矣！

接下來我將給大家分享單元素如何實現多重邊框效果~~

一、雙重邊框效果

使用border-style: double就可實現簡單的雙重邊框效果，實現效果如下：

border-style: double
 

實現方法雖然簡單，但是缺點也是非常明顯：

     ① 無法精確控制雙重邊框的粗細及之間的間隔；

     ② 無法改變雙重邊框的樣式，比如雙重虛線邊框；

     ③ 無法實現更多層次的邊框效果。

二、雙重多樣化邊框效果

對于outline屬性，我們平時用得比較少，其代表元素的外輪廓，顯示于邊框外圍，大多數情況似乎都只是用于清除表單控件的默認focus樣式：outline: none;

而事實上，outline可以制作出與border屬性近乎相同的效果，而且寫法上也幾乎沒有差別，但是這里還是大概講講這兩者存在的細微差別：

     ① outline不占據實際空間大小，這一點與box-shadow很像；

     ② outline不能像border一樣拆分成border-left、border-right等屬性；

     ③ outline不能設置圓角。

上面例子中還用到了outline-offset屬性，這個屬性其實是outline在CSS3中新加的屬性，該屬性不能合并簡寫在outline中，用于控制外邊框與外輪廓之間的距離。

outline屬性
 

這個實現方法也很簡單，而且更加靈活，但是也存在幾個缺點：

     ① outline屬性無法設置圓角（火狐下可以設置-moz-outline-radius屬性來實現圓角，只可惜其他瀏覽器下并無此屬性），所以圓角雙重邊框無法實現；

     ② 同樣無法實現更多層次的邊框效果。

三、多重多樣化邊框效果