正常我們可以通過(guò) rgba 或者 hsla 來(lái)實(shí)現(xiàn)半透明背景效果，但是用在邊框上卻會(huì)失效。其實(shí)有一個(gè)神奇的屬性 background-clip 只要加上他，奇跡就會(huì)出現(xiàn)啦。

具體代碼如下：

<div class="bg"></div> <style> body{background: red;}.bg{width: 200px;height: 200px;margin: 100px auto;background: #fff;border: 30px solid hsla(0, 0%, 100%, .5);background-clip: padding-box; //這里是重點(diǎn)哦} </style>

效果如圖：

這里我偷懶用了純色的背景，其實(shí)換成背景圖會(huì)更好看。

總結(jié)

以上是生活随笔為你收集整理的CSS 实现半透明边框效果实战的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。