1.多重邊框
我們可以通過使用border-image來寫一個多重邊框，或使用多個元素來模擬多重邊框，不過我們有更好的辦法來制作一個多重邊框，那就是使用box-shadow的第四個參數(shù)（稱為擴張半徑）來完成一個多重邊框的制作，肯定大家都已經(jīng)非常熟悉box-shadow了，不過我還是來復(fù)習(xí)一下。
（1） box-shadow:none | <shadow>#
where
<shadow>= [inset? && [ <offset-x><offset-y><blur-radius>? <spread-radius>? <color>? ] ]#
| 值（values） | 說明 |
|---|---|
| inset | 默認陰影在邊框外，使用inset后，陰影在邊框內(nèi)； |
| offset-x | 水平偏移量，負值將陰影放在元素左側(cè)； |
| offset-y | 垂直偏移量，負值將陰影放在元素上方； |
| blur-radius | 默認0，不能為負值；值越大，模糊面積越大，陰影越大越淡； |
| spread-radius | 默認0，正值陰影擴大，負值陰影收縮； |
| color | 顏色，不設(shè)置則由瀏覽器決定； |
這里我們就用spread-radius來制作一個多重邊框，box-shadow支持逗號分隔語法，來創(chuàng)建多個數(shù)量的投影；
我們需要注意的是，box-shadow是層層重疊的，第一層投影位與最頂層，比如你想在下面示例（圖1-1.png）外圈再加一道20px的黑色邊框，你需要設(shè)置spread-radius的值為60px（40px+20px）；
示例：
background: red;
box-shadow: 0 0 0 20px green,
0 0 0 40px blue;
效果：（圖1-1.png）
注意：
box-shadow是不會影響布局的，也不會受到box-sizing的影響，這樣制作出來的“假邊框”也是不會響應(yīng)鼠標(biāo)事件的，比如點擊；
（2）outline:[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
在某些情況下，你只需要兩層邊框，這是你可以通過常規(guī)邊框，再加上outline來生成外層的邊框。它比box-shadow（只能模擬實線邊框）要靈活一些，還有一些別的邊框樣式，比如虛線邊框；
還有一點就是它可以通過outline-offset來控制它跟元素邊緣的間距，這個屬性接收負值；（圖1-2.png）
示例：
background: gray;
outline: 5px dashed #fff;
outline-offset: -10px;
效果：（圖1-2.png）
(3)邊框內(nèi)圓角
outline示例：
background: red;
outline: 10px solid green;
border-radius: 20px;
效果：（圖1-3.png(outline)）
我們來看上面的這個例子（圖1-3.png(outline)），我們發(fā)現(xiàn)outline是不貼合元素圓角的，并不是我們想要的效果；那我們有什么方法來解決這個問題，實現(xiàn)邊框內(nèi)圓角這個效果呢？
我們先來看一下下面這個例子：
box-shadow示例：
background: red;
border-radius: 20px;
box-shadow: 0 0 0 20px blue;
效果：（圖1-4.png(box-shadow)）
我們發(fā)現(xiàn)outline不貼合元素圓角，但box-shadow是貼合元素圓角的，那么想法就來了，把outline和box-shadow的邊框顏色設(shè)置成一樣不就實現(xiàn)這個效果了，哈哈，是不是有點黑科技的感覺；
示例：
outline: 10px solid green;
border-radius: 20px;
box-shadow: 0 0 0 10px blue;
效果：（圖1-5.png && 圖1-6.png）
圖1-5.png： outline：green，box-shadow：blue
圖1-6.png： outline：green，box-shadow：green
注意，我們給box-shadow設(shè)置的擴張半徑并不一定等于描邊的寬度，我們只需要剛好填充上圖（圖1-3.png）的白色區(qū)域就可以了，那么我們設(shè)置多大的擴張半徑可以填補這個區(qū)域呢？
哈哈，來初中的勾股定理要來了，看下圖（圖1-7.png）
看圖上就已經(jīng)很清楚了，就不說了，所以要填補上圖（圖1-3.png）的白色區(qū)域，就只需要（√2-1）*r 約等于8.28427px就可以了；
2.連續(xù)的圖像邊框
問題：
有時我們需要將一張圖片應(yīng)用為一個元素的邊框，而不是背景；不僅如此，我還希望這張圖片可以自動延伸并覆蓋完整的邊框區(qū)域，如下圖(圖2-1.png)效果；
圖2-1.png
- 你肯定會想到用
border-image，它的原理是“九宮格伸縮法”：把圖片分割成九份，然后把它們應(yīng)用到元素邊框相應(yīng)的邊和角；
關(guān)于它的工作原理，可以看我的上一篇文章CSS揭秘整理之半透明邊框； - 問題在于，我們并不想讓圖片的某個特定區(qū)域固定在拐角處，而是希望拐角處的圖片區(qū)域能夠隨著元素的寬高和邊框的厚度變化而變化，你只要稍微嘗試一下，就會發(fā)現(xiàn)用
border-image并不可能做得到；
那我們應(yīng)該怎么辦呢？
解決方案：
- 最簡單的解決方法就是使用兩個元素，一個用來存放背景，一個用來存放內(nèi)容，它需要一個額外的html元素，這顯然是一個不太理想的方法；
- 我們可以利用css漸變和背景擴展來完成完全一樣的效果，我們的主要思路： 在背景圖片之上，再疊加一層白色的背景，為了讓下層的背景透過透明邊框顯示出來，我們給它設(shè)置不同的
background-clip值；
示例：
padding: 30px;
border:20px solid transparent;
background: linear-gradient(white,white), url('http://p0.so.qhimgs1.com/bdr/326__/t0146c3062c8d78dce0.jpg');
background-size: cover;
background-clip: padding-box,border-box;
background-origin: border-box;
效果：（圖2-2.png）
螞蟻行軍邊框
利用css漸變和背景的擴展 ，先給背景設(shè)置一層條紋背景，再在上面設(shè)置一層白色實色背景，然后需要給條紋背景設(shè)置一個合適的background-size值，最后將background-position以動畫的方式改變?yōu)?00%，這樣就完成滾動了；(這里設(shè)置background-size還真的是有點麻煩啊，條紋換個角度就又要改一下才能無縫拼接，不知道有什么好的方法，望大神分享一下哦，嘻嘻)
where
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
示例：
padding: 50px;
border:20px solid transparent;
background:linear-gradient(white,white) padding-box,repeating-linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0 ,#fb3 75%,#58a 0) 0 / 40px 40px;
/*background:linear-gradient(white,white) padding-box,repeating-linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0 ,#fb3 75%,#58a 0);
background-position: 0;
background-size: 40px 40px;*/
animation: ants 12s linear infinite;
效果：（圖2-3.gif）
本內(nèi)容根據(jù)《css揭秘》, MDN 和自己的理解進行整理；
感謝您的閱讀。
