css学习笔记1--半透明边框

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;
        }
复制代码

效果如图：

转载于:https://juejin.im/post/5c6b9b546fb9a049c85005e0