background-clip 实现半透明边框？

如何实现半透明颜色，如何控制背景的侵入行为？

半透明颜色

CSS 中实现半透明颜色方法：rgba() 和 hsla()

PS: HSLA(H, S, L, A)
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。

使用 background-clip 控制背景的侵入方式。

默认情况下：background-clip 取值 border-box，背景被元素的边框外沿裁切掉。如图1-1。可以设置为 padding-box，沿着内边框外沿裁切。如图1-2。

实现代码

.container {
  width: 200px;
  height: 200px;
  background: red;
}
/* 默认：侵入 border-box 图1-1*/
.demo-1 {
  border: 20px solid hsla(0, 0%, 100%, 0.2);
}
/* 图1-2 */
.demo-2 {
  border: 20px solid hsla(0, 0%, 100%, 0.2);
  /* // 设置背景的侵入方式。 */
  background-clip: padding-box;
}

图1-1

图1-2