正常我們可以通過 rgba 或者 hsla 來實現半透明背景效果，但是用在邊框上卻會失效。其實有一個神奇的屬性 background-clip 只要加上他，奇跡就會出現啦。

具體代碼如下：

<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; //這里是重點哦} </style>

效果如圖：

這里我偷懶用了純色的背景，其實換成背景圖會更好看。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。