需求描述

如图所示，欲给内层容器设置白色的背景和白色的半透明边框，使外层容器的背景色可以透过来。

image.png

无效的尝试

关于上述需求，最开始的尝试可能是这样的：

box {
  border:  10px solid rgba(255, 255, 255, .5);
  backrgound: #fff;
}

然而得到的结果是这样的：

image.png
也就是说，这种方式并不能得到一个半透明的白色边框。这是因为，默认情况下，背景延伸到了边框所在区域的下层。

解决方法

将background-clip设置为padding-box：

box {
  border:  10px solid rgba(255, 255, 255, .5);
  backrgound: #fff;
  background-clip: padding-box;
}

关于backgrpund-clip

设置元素的背景（背景图片或颜色）是否延伸到边框下面。
详见MDN：background-clkip