《css揭秘》笔记（二），半透明边框

《css揭秘》笔记（二），半透明边框

半透明边框

如果用hsla为<div></div>设置一个半透明的边框，相关css设置（此处设置的是一个红色的div，hsla设置的是一个灰色的半透明色）：

.box1{
  width: 6.25rem;
  height:6.25rem;

  background: red;
  border:10px solid hsla(0,0%,100%,.5);
}

如果恰好<html\>的背景颜色也是默认的白色，你会发现此处设置的<div>并没有显示出灰色的半透明边框，而是一个偏红色的边框。

这是因为在默认情况下背景会显示在边框的下层，而边框只是覆盖在了背景上而已，此时只需在原有的背景设置上多增加一个属性background-clip: padding-box;，使背景不显示边框区域的内容：

.box1{
  width: 6.25rem;
  height:6.25rem;

  background: red;
  border:10px solid hsla(0,0%,100%,.5);
  
  background-clip: padding-box;
}

然而这时得到的边框却又没有了：

其实并不是没有，只是边框的色调比较低，再加上边框设置的透明度比较低，所以看不见而已，换一个比较深的颜色就能看见了，如：

.box1{
  width: 6.25rem;
  height:6.25rem;

  background: red;
  border:10px solid hsla(240,80%,80%,.5);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

全文是《css揭秘》一书的笔记，如果侵权请联系我删除