CSS揭祕-半透明邊框與多重邊框

場景一：

實現半透明邊框：

因爲CSS樣式的默認行爲，背景色的渲染範圍是 content+padding+border。

半透明邊框被主調色影響, 實現的效果爲

 

解決方案：

使用background-clip 屬性規定背景的繪製區域,使得繪製區域僅限制在content+padding。

Div {
border:10px solid rgba(0,0,0,.5);
background: lightblue;
background-clip: padding-box;
}

補充： background-clip 不兼容IE6-8, Opera10 

 

場景二：

實現多重邊框：

方案1： 使用box-shadow來生成多重投影

代碼與效果以下：

div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

方案2：盒子邊框結合描邊屬性(outline)

特色： 只能實現兩重邊框，更加靈活，能使用虛線等效果

代碼與效果以下：

div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}