CSS 實作半透明邊框效果實戰

正常我們可以通過 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>