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>

效果如图：

这里我偷懒用了纯色的背景，其实换成背景图会更好看。