場景一：

實現半透明邊框：

由于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;}

總結

以上所述是小編給大家介紹的CSS實現半透明邊框與多重邊框的場景分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！