透明边框

本例为《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区域开始向外裁剪背景。