這篇文章主要介紹CSS怎么實(shí)現(xiàn)半透明邊框與多重邊框，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

章貢ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

場(chǎng)景一：

實(shí)現(xiàn)半透明邊框：

由于CSS樣式的默認(rèn)行為，背景色的渲染范圍是 content+padding+border。

半透明邊框被主調(diào)色影響, 實(shí)現(xiàn)的效果為

解決方案：

使用background-clip 屬性規(guī)定背景的繪制區(qū)域,使得繪制區(qū)域僅限制在content+padding。

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

補(bǔ)充： background-clip 不兼容IE6-8, Opera10

場(chǎng)景二：

實(shí)現(xiàn)多重邊框：

方案1： 使用box-shadow來(lái)生成多重投影

代碼與效果如下：

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

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

特點(diǎn)： 只能實(shí)現(xiàn)兩重邊框，更加靈活，能使用虛線等效果

代碼與效果如下：

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

以上是“CSS怎么實(shí)現(xiàn)半透明邊框與多重邊框”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！