emmm... 作为前端非入门级选手，第一篇文就从学习笔记开始吧。 感受感悟什么的可能现在还没有，不过一点一点来吧~ 代码有自己添加的部分，如果有问题希望各位大佬多多批评指正！~

Q：

如果要给一个容器设置一个半透明边框，我们能想到的：复制代码

body{            background: url("xxxx.jpg") ;        }        div{            width: 200px;            height: 200px;            margin: 100px;            border:10px solid hsla(0, 0%, 100%, .5);            background: white;        }复制代码

但是我们发现，这并不能实现半透明边框：复制代码

A:

这是因为，在我们想要的半透明边框处透出的是容器自己的纯白实色背景，而不是想要的body的背景。 我们可以通过background-clip属性来调整上述问题。 这个属性的默认初始值是border-box，就意味着背景会被元素的border-box（边框的外沿框）剪裁掉。 我们可以把它的值设置为padding-box，这样浏览器就会用内边距的外沿来把背景裁剪掉。

body{             background: url("xxxx.jpg") ;        }        div{            width: 200px;            height: 200px;            margin: 100px;            border:10px solid hsla(0, 0%, 100%, .5);            background: white;            background-clip: padding-box;        }复制代码

效果如图：