css边框入门教程（每天一个CSS小技巧）
css边框入门教程（每天一个CSS小技巧）这个属性的初始值是border-box，意思是背景会延伸到边框的外沿框，如果不希望背景侵入边框所在的范围，只需这么做即可而这就是背景的工作原理。我们只能接受它并且向前看。好在我们可以通过backgound-clip属性来改变上述默认的行为所带来的不便。虽然得到了白色的背景，但半透明的边框去哪里了？尽管看起来有问题，但边框是实际存在的。默认情况下，背景会延伸到边框所在的区域下层，这一点很容易验证，我们只需要把边框属性中的solid改为dashed，就能验证，这里特地把边框颜色改为绿色，这样会使效果更明显 body{ background: black; } .box1{ width: 200px; height: 200px; border: 10px dashed hsla(120 100% 60% .5);
问题假设我们想给一个容器设置一层白色背景和一道半透明白色边框
html代码：
<body>
<div class="box1"></div>
</body>
一开始你可能想这么做
<style>
body{
background: black;
}
.box1{
width: 200px;
height: 200px;
/*看这里*/
border: 10px solid hsla(0 0% 100% .5);
background: white;
}
</style>
但这样得到的效果是：
虽然得到了白色的背景，但半透明的边框去哪里了？
解决方案尽管看起来有问题，但边框是实际存在的。默认情况下，背景会延伸到边框所在的区域下层，这一点很容易验证，我们只需要把边框属性中的solid改为dashed，就能验证，这里特地把边框颜色改为绿色，这样会使效果更明显
body{
background: black;
}
.box1{
width: 200px;
height: 200px;
border: 10px dashed hsla(120 100% 60% .5);
background: white;
}
所以我们原本做的事情并没有让body的背景从半透明白色边框处透出来，而是在半透明白色边框处透出了这个容器自己的纯白色背景，这实际上得到的效果跟纯白色的边框看起来完全一样。
而这就是背景的工作原理。我们只能接受它并且向前看。好在我们可以通过backgound-clip属性来改变上述默认的行为所带来的不便。
这个属性的初始值是border-box，意思是背景会延伸到边框的外沿框，如果不希望背景侵入边框所在的范围，只需这么做即可
<style>
body{
background: black;
}
.box1{
width: 200px;
height: 200px;
border: 10px solid hsla(0 0% 100% .5);
background: white;
background-clip: padding-box;
}
把background-clip的属性设置为padding-box，这样背景只会延伸到边框的内沿框，效果如下：
