CSS揭秘——半透明边框

看到这个半透明边框，我们立马想到的就是给 boder 加一个半透明边框即可。

假设给一个容器设置白色背景和一道半透明白色边框，我们尝试的代码可能就是下面的样子：

border: 10px solid hsla(0,0%,100%,0.5);
background: white;

这时我们发现我们想要的效果没有出来，只有白色背景，根本没有边框。这个只是视觉上的感受，实际边框是存在的，只是在默认情况下，背景会延伸到边框所在的区域下层，我们可以写个 demo 就可以看到：

现在我们可以通过 background-clip 属性来调整，这个属性初始值为 border-box，意味着背景会被边框的外沿裁切掉，此时可以把它的值设置为 padding-box 或者 content-box，这样就可以实现我们想要的效果了。

border: 10px solid hsla(0,0%,100%,0.5);
background: white;
background-clip: padding-box;

从两者的对比可以清楚的看到差别。

background-clip为border-box：

background-clip为padding-box：

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！ 欢迎大家来聊，有意向可发送简历到 chen_zhen@dahuatech.com，加入我们，可以一起进步，一起聚餐，一起旅游，让我们从世界村的小伙伴变成大华村的小伙伴。