有些情況下，為了滿足一些要求，普通的邊框有點達不到我們的需求，這時我們可以使用多重邊框。語法：box-shadow: h-shadow v-shadow blur spread color inset;值
說明h-shadow
必需的。水平陰影的位置。允許負值
v-shadow
必需的。垂直陰影的位置。允許負值
blur
可選。模糊距離
spread
可選。陰影的大小
corlor
可選。陰影的顏色。在css顏色值尋找顏色值的完整列表
inset
可選。從外層的陰影（開始時）改變陰影內側陰影
在背景與邊框（第三版）還在草案階段時，css工作組中有過討論，關於是否應允許多重邊框，就如多重背景一般，當時一致認為這個特性沒有足夠多的使用場景，而且網頁開發者還可以使用border-image來達到相同的效果。然而當時研究的工作組成員卻忽略了這一點：我們通常希望在css**層面以更靈活的方式來調整邊框樣式。因此，網頁開發者最終不得不折騰出各種醜陋的hack，比如使用多個元素來模擬多重邊框。不過，我們還有更好的辦法來解決這個難題，並不需要新增無用的額外元素來汙染我們的結構。
眾所周知，box-shadow可以生成投影。不過，不太被人所知的是，他還接受第四個引數（稱作「擴張半徑」），通過指定正值或負值，可以讓投影面積變大或減小。乙個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值，得到的「投影」其實就像一道實現邊框（圖一）。
但是這種效果沒什麼大不了，你用border屬性也可以生成乙個一樣的邊框效果。不過使用box-shadow的好處是，它支援逗號分隔語法，我們可以建立任意數量的投影。因此，我們可以繼續的的之前的示例中再加上一道deeppink的「邊框」：
從可以看出，新新增的邊框只可以看到5畫素的寬度，這一點是需要注意的，box-shadow是層層疊加的，第一層投影位於最頂層，以此類推。因此，在新增新邊框時，你需要按照此規律調整擴張半徑。比如說，在前面的**中，我們想在外圈再加一道5px的外框，那就需要指定擴張半徑的值為15px（10px+5px）。
這些邊框下面也可以加一些常規的投影：
多重投影解決方案在絕大多數場合都可以很好地工作，但有一些注意事項。
當你只需要兩層邊框時，那就可以先設定一層常規邊框，再加上outline（描邊）屬性來產生外層的邊框。這種方法更具多樣性，不僅可以模擬實線邊框，也可以產生虛線邊框效果。
background
:white;
border
: 10px solid #655;
outline
: 5px solid deeppink;
描邊的另乙個好處是，可以通過outline-offset屬性來控制它跟元素邊緣之間的間距，這個屬性甚至可以接受負值，這對於某些效果非常有用。
本方案也有需要注意的地方。
CSS揭秘 2 多重邊框
outline 方案 背景知識 box shadow的基本用法，outline基本用法 x偏移量 y偏移量 陰影模糊半徑 陰影擴散半徑 陰影顏色 box shadow 2px 2px 2px 1px rgba 0,0,0,0.2 以上是box shadow的基本引數。box shadow是為元素新增...
CSS揭秘 背景與邊框
css編碼技巧 font size 20px line height 1.5 1.半透明邊框 border 10px solid hsla 0,0 100 5 background white background clip padding box 2.多重邊框 background yellowg...
CSS揭秘 案例2 多重邊框
定義和用法 box shadow 屬性向框新增乙個或多個陰影 語法 box shadow h shadow v shadow blur spread color inset 值描述 h shadow 必需。水平陰影的位置。如果值為正值，則陰影在物件的右邊，反之其值為負值時，陰影在物件的左邊。v sh...