hsla background-clip

1.png

大家看到这个div，想想自己如何去实现

然后看下代码

<div class="d1"></div>
.d1{
  height:50px;
  width:50px;
  background:hsla(0,100%,50%,0.4);
  border:10px solid hsla(50,50%,80%,0.6);
  padding:20px;
  background-clip:content-box;
}

使用一个div就可以实现
中间红色为content内容，白色为padding内边距，外面的米黄色为border边框

这里会用到hsla来表示颜色的方法
HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。

然而我们的重点是在background-clip这个CSS3属性
官方的解释为background-clip 属性规定背景的绘制区域，属性值为有border-box,padding-box,content-box

好了我们分别看下效果
改变上面的css为border-box

2.png

这时候我们发现 content内容的颜色会继续衍生到padding 和border去，
所以当值为border-box时，background的值会对边宽和边框内的所有部分都有效

当使用padding-box时

3.png

他的background的颜色只会填充到padding 不会再衍生到border去，

当使用content-box为第一张图的效果

1.png

--》所以background-clip这个属性会对background影响的范围起作用。
而当影响不到padding的颜色时，padding会成透明色，看下面例子

<body>
  <div class="d2">
  <div class="d1"></div>
  </div>
</body>
body{
  background:green;
}
.d1{
  height:50px;
  width:50px;
  background:hsla(0,100%,50%,0.4);
  border:10px solid hsla(50,50%,80%,0.6);
  padding:20px;
  background-clip:content-box;
}
.d2{
  width:200px;
  height:200px;
  background:yellow;
}

4.png

这里还有一个background-origin属性，他是对背景图片有效，而background-origin 属性规定 background-position 属性相对于什么位置来定位，以哪里个位置作为0,0起始位位置

hsla background-clip

推荐阅读更多精彩内容