《css-secrets》-demo：半透明边框

《css-secrets》

半透明边框

关键字：半透明;边框;background-clip

需求描述

• 给一个容器设置一层白色背景和一道半透明白色边框
• body 的背景会从它的半透明边框透上来

最终效果.png

常规思路

body {
  background-color: aquamarine;
}

#example-box {
  background-color: #fff;
  border: 10px solid rgba(255, 255, 255, 0.5);
  width: 200px;
  height: 200px;
}

结果

检查元素，边框确实存在，但是直接是白色，body 并没有从半透明边框透上来

实际效果.png

检查元素-1.png

检查元素-2.png

原因

默认情况下， 背景会延伸到边框所在的区域下层，即#example-box的白色背景延伸到了半透明边框下

使用黑色虚线边框进行测试

border: 10px dashed #000;

如图所示

测试.png

可见虚线之间都是#example-box的白色背景部分

解决方法

background-clip
作用：裁剪元素背景

body {
  background-color: aquamarine;
}

#example-box {
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.5);
  width: 100px;
  height: 100px;
}

最终效果.png