半透明边框

默认情况下， 元素的背景会延伸到元素边框所在的区域下层。这一点很容易验证，给一个有背景的元素加一道的虚线边框，就可以看出来：

div {
  width: 200px;
  height: 200px;
  border: 10px dashed hsla(0, 0%, 100%, 0.5);
  background: darkgreen;
}

效果图：

有个属性可以让背景缩到边框里面，就是background-clip。这个属性的初始值是 border-box，意思就是背景会被边框的外沿框修剪掉，背景会延伸到边框的外沿。

如果不希望背景延伸到边框外沿，可以把background-clip的值写成 padding-box，这样浏览器就会用内边距的外沿，把背景裁切掉。

div {
  width: 200px;
  height: 200px;
  border: 10px dashed darkorange;
  background: darkgreen;
  background-clip: padding-box;
}

效果图：