css多重邊框

一、使用box-shadow實現多重邊框

html

<

div 
class
="multiple"
>
div>

.multiple

值得說明的是，box-shadow是層層疊加的，第一層投影位於最頂層，依次類推。因此你需要按照此規律擴張半徑。比如上面的**，如果我們想在外層在加乙個5px的外框，那麼久需要指定擴張半徑的值為25px（20px+5px）。上述方法所建立出的「假的邊框」出現在元素的外圈，他們並不會響應滑鼠事件，比如懸停或者點選，如果這一點非常重要，你可以給box-shadow屬性加上inset關鍵字，來使投影繪製在元素的內圈，注意此時需要額外的內邊距倆騰出足夠的空間，**如下。

css

.multiple

二、使用outline實現二重邊框（縫邊效果）

html

<

div 
class
="multiple"
>
div>

.multiple

注意：1. 這種方法只適用於雙層邊框的場景；

2. 邊框不一定融合border-radius產生的圓角

3. 可以接受負值，因此可以實現縫邊效果，如下：

css

.multiple

使用border+outline也可以實現這種效果：

css

.multiple

CSS實現多重邊框

想到多重邊框，我們可能會通過多個元素來模擬實現，但是如何在乙個元素上實現多重邊框呢？如下圖 我們可以通過box shadow來實現。box shadow h shadow v shadow blur spread color inset outset 分別是 水平陰影位置 垂直陰影位置 模糊距離 擴...

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揭秘 背景與邊框（2） 多重邊框

有些情況下，為了滿足一些要求，普通的邊框有點達不到我們的需求，這時我們可以使用多重邊框。box shadow屬性可以設定乙個或多個下拉陰影的框。語法 box shadow h shadow v shadow blur spread color inset 值 說明h shadow 必需的。水平陰影的...