第二章 Background & Borders 之 Multiple borders

標籤：效果   注意   white   blur   set   span   bsp   offset   off   

2. Multiple Boerders 多邊框

在工作中我們可能會遇到給盒子外層實現多個邊框。如以下效果：

方法1：

實現這個效果，其實很簡單，使用CSS3 的box-shadow屬性,先看看box-shadow屬性怎麼使用吧。

box-shadow: h-shadow v-shadow blur spread color inset|outset / none/ inherit

h-shadow 相對盒子的水平位移量

v-shadow 相對盒子的垂直位移量

blur 模糊半徑(陰影的寬度)

splread 擴充半徑(陰影的擴充寬度)

inset/outset(預設) 內陰影還是外陰影

多邊框的原理就是給盒子加上多個陰影。

如實現方法：

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);

box-shadow 設定的三個陰影，由裡到外。第一個陰影的半徑為10px， 第二個陰影的半徑為15px, 第三個陰影和第二個陰影重合了，用來設定陰影製作效果。

所以，值得注意的是，裡面到外面的陰影是會覆蓋外面的。這就是為什麼第二個設定15px,而不是10px的原因。

 

方法2：

box-shadow的方法雖好，但並沒有真正應用到border上，對盒子的大小沒有影響。所以第二個方法是使用outline屬性：

outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

outline: color style width / initial / inherit

如效果的代碼，可以這樣寫:

.box{width: 100px;height: 80px;background: #655;border:2px dashed white;outline: 15px solid #655;outline-offset: 5px;　}

　　

但是outline 只適用於出現兩個border的情況，而且也不適用於圓角的情境。 -_-  

 

應用情境：製作以片中的原型邊框可以使用box-shadow。

 

第二章 Background & Borders 之 Multiple borders