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;
}
效果如图：
