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>

效果如图：

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