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：背景被裁剪到内容框。
