給你的元素加個邊框吧！多重邊框、圓角邊框、多重圓角邊框統統都可以！
邊框是我們做網頁時經常用到的屬性，它可以給你的網頁增加很多美觀性，今天我們就來好好說一說怎麼用更多的方式增加邊框。
一.多重邊框
一個邊框很簡單，就不說了。border嘛對不對。
好，那麼，二重邊框 呢？比如說這樣：
啊，你肯定要說，這還不簡單，再加一個div不就行了…
<div>
<div></div>
</div>nonono，記住，今天我們所有的邊框，都是在一個div下完成的！對的，就是這樣
<body>
<div> </div>
</body>
就這樣，再也沒有別的了……
這怎麼辦呢？border好像只能設定一個啊…
可能有的童鞋已經想到了，outline啊！對啊，outline的確可以：
border: 10px solid yellow;
outline: red solid 10px;那就說下outline唄，outline就是描邊，在外面畫一條線，跟border看起來沒差，不過要注意的是順序是outline：color style width ，而且瀏覽器的支援性也很好。
那麼，繼續？比如，三重邊框？？？
這..好像有點難..
能不能再加一個outline？比如這樣？
border 試一試，
哎這個這個。。怎麼覆蓋掉了。。看來outline也不行啊。。
哎等等，其實還真的行！
可能有人知道只是沒想起來，outline還有個屬性叫做outline-offset，這個幹嘛用的呢？就是設定它的擴張收縮。可以給它指定一個10px，那麼它就往外擴張10px，更有趣的是，它還可以被指定一個負值，比如-10px，那如果在這個例子裡給它-10px會怎樣？沒錯，它會覆蓋在border上，當我們給border一個合適的寬度時，三重邊框就出現了！
嗯看起來還不錯，但是好像有點問題啊，你這個，怎麼跟上面那張不太一樣呢？..
這就是outline的侷限性了，它的確做到了三重邊框，但是顏色卻無法像上面那樣，那上面那個黃紅藍怎麼做的？誒你是不是騙我呢？你是不是就是用了兩個div？？
當然不會，騙你們幹嘛還寫這篇博文啊！
好讓我們會見第三位嘉賓：box-shadow！
好的大家都知道這個屬性，心裡瞬間就明亮了對不對，哎我知道怎麼做了：
border: 30px solid yellow;
outline: red solid 10px;
box-shadow: 0 0 30px blue;就是這樣！前兩個值是x、y軸的偏移，第三個值是模糊半徑，然後是顏色，看起來好像可以，來我們試試：
這。。怎麼沒有啊。。難道是30px太小了？那給個100px！
好了這下的確有了，但完全不是邊框啊！根本不是我們想要的樣式，這可咋辦？
其實box-shadow還有第五個值，box-shadow：0 0 0 0 #,就是在模糊和顏色之間加了一個值。
這個值是幹嘛用的呢？其實跟outline差不多，可以讓它擴張，這個擴張和模糊不一樣，它是實打實的！好，那麼我們的程式碼就出來了：
border: 10px solid yellow;
outline: red solid 10px;
box-shadow: 0 0 0 20px blue;效果呢？就是上上上面那張圖。細心的小夥伴會發現，你這個border：10px，outline：10px，box-shadow怎麼就20px呢？這個問題很有意思，當我們把outline去掉的時候，你就會發現border還是10px，但shadow已經變成了20px，這說明了什麼？
shadow是從border外開始的，而且會被outline擋住。那如果去掉border呢？沒錯，outline是10px，shadow也是10px。這裡就不放圖了。
還有更細心的小夥伴發現，你剛剛說這個box-shadow跟outline差不多，但是你只說了它可以向外擴張，那麼它能不能收縮呢？這個嘛，就留給大家去試試了。
好了，知道了box-shadow我們就可以做出三重邊框了，那麼來試試四重？
哈哈，不要懵，要知道box-shadow是可以設定多重值的，就像這樣：
box-shadow: 0 0 0 20px blue, 0 0 0 30px green;好了，那麼像這樣，什麼五重六重一百重統統不在話下，不過要注意的一點是擴張的值要越來越大，因為它是會被擋住的。
二.圓角邊框
好了，我們的多重邊框已經說完了，現在該說圓角邊框了。
其實大多數時候我們用邊框的時候，都是用圓角的，原因嘛，當然是因為圓角的更圓滑美觀一些。
border-radius，值可以用px，也可以用百分比，當值≥50%時，就可以得到一個圓，當然這是在一個正方形的前提下，長方形呢就是橢圓。
一重圓角邊框很簡單，照例不說了。直接說二重圓角邊框：
啊這個很簡單嘛，直接給個border-radius不就行了：
border: 10px solid yellow;
border-radius: 50%;
outline: red solid 10px;看起來好像可以，不過試一試就會發現：
這什麼鬼！完全不對頭啊！..這裡就要說一說outline的不足了，它不會隨著邊框一起“變彎”，筆直筆直的有沒有！？
所以要實現這個，必須得用box-shadow，它就會緊貼著border，你直我也直，你彎我也彎！
就像這樣：
程式碼就是：
border: 10px solid yellow;
border-radius: 50%;
box-shadow: 0 0 0 10px red,0 0 0 20px blue;就算有很多重也沒問題！是不是要比outline好用很多！想要什麼色就要什麼色，想怎麼彎就怎麼彎！
好了講到這裡差不多就完了，有人可能會說，你這設定這麼多邊框有啥用啊？看著也不怎麼好看……其實好不好看嘛，稍微變下樣式就行了。比如說晚上街上那一閃一閃的LED招牌，給box-shadow加個動畫改下樣式完全可以做出那種效果啊！沒有做不到只有想不到嘛！
最後再說一點…
三.一點細節
當我們給元素新增邊框的時候，邊框都是有一定寬度的，那麼這個寬度佔了一定的位置，就有可能影響到佈局，所以有時候還是得留心一下的。
border是佔據空間的，比如說原本兩個元素之間的距離是10px，當你給一個元素加10px的border時，他們的距離就會變成20px，因此有時候加了border，就會影響到頁面的佈局。
而outline和box-shadow不佔據空間，也就是不會影響佈局，加了10px後元素間距離仍未10px。
這個大家多用用就會清楚了。
而且，box-shadow要IE9以上才支援。
好了，羅嗦了半天，終於是說完了。有什麼錯誤的話，歡迎大家指正，有什麼問題也可以留言，大家一起學習一起進步！