?CSS如何實(shí)現(xiàn)半透明邊框與多重邊框效果

發(fā)布時(shí)間：2021-01-21 09:35:25 來(lái)源：億速云閱讀：174 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)CSS如何實(shí)現(xiàn)半透明邊框與多重邊框效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

CSS實(shí)現(xiàn)半透明邊框與多重邊框效果。

場(chǎng)景一：

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

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

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

?CSS如何實(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;
}

?CSS如何實(shí)現(xiàn)半透明邊框與多重邊框效果

方案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)半透明邊框與多重邊框效果

感謝各位的閱讀！關(guān)于“CSS如何實(shí)現(xiàn)半透明邊框與多重邊框效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡