《css揭秘》学习（一）半透明边框

1. 知识点
HSLA颜色：HSLA(H,S,L,A)，取值：H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360；S：Saturation(饱和度)。取值为：0.0% - 100.0%；L：Lightness(亮度)。取值为：0.0% - 100.0%；A：Alpha透明度。取值0~1之间。
2. html代码：<div class="box1"></div>
3. css代码：

body{
       background: red;
}
.box1{
        width: 30px;
        height: 30px;
        background: white;
        border: 10px solid hsla(0,0%,100%,.5);
}
4.运行效果： ，这样看起来并没有边框，好像全部是content，但其实他是有边框的， 。出现这样的原因是什么？
原因：body 的背景没有从半透明白色边框处透上来， 而是在半透明白色边框处透出了这个容器自己的纯白实色背景， 这实际上得到的效果跟纯白实色的边框看起来完全一样。默认状态下，背景会延伸到边框的区域下层。
5.解决办法：在css代码中加一句：background-clip: padding-box;
6.实现效果：
7.补充知识：background-clip 属性规定背景的绘制区域。

border-box：背景被裁剪到边框盒；
padding-box：背景被裁剪到内边距框；

content-box：背景被裁剪到内容框。

转载于:https://www.cnblogs.com/cxq0809/p/7452915.html