透明边框

发表于

本例为《CSS揭秘》内容，仅用来练手学习。

目的

我们想要给容器设置一个半透明的边框，能够让body的背景从半透明边框中透上来。

HSLA

  • H：色调。0(或360)为红色，120为绿色，240为蓝色。
  • S：饱和度。取值：0.0% ~ 100%
  • L：亮度。取值：0.0% ~ 100%
  • A：透明度。取值0~1
1
2
3
4
5
6
7
8
body{
  background: url();
}
div{
border: 10px solid hsla(0,0%,100%,.5);
background: white;
}

但是我们会发现容器的背景会延伸到边框所在的区域。

把边框设置为虚线，容器背景设置为其他颜色，可以看出背景确实延伸到了边框的区域。

background-clip

这个属性的值默认为border-box,是指从border区域开始向外裁剪背景。

1
background-clip: padding-box;

我们把值设置为padding-box，这样就从padding区域开始向外裁剪背景。