如何用CSS为灰色边框添加白色角效果？

方案一：修正Mask实现（适配div） #

你之前的代码是针对img标签设计的，div作为块级元素需要调整mask的组合逻辑来避免边框重叠。下面是适配div的修正代码：

div {
  --s: 50px; /* 切角大小 */
  --t: 5px;  /* 边框厚度 */
  --g: 20px; /* 内容与边框的间距 */
  --border-color: #B38184;
  --bg-color: #fff; /* 白色角的背景色 */

  box-sizing: border-box;
  padding: calc(var(--g) + var(--t));
  background: var(--bg-color);
  outline: var(--t) solid var(--border-color);
  outline-offset: calc(-1 * var(--t));
  transition: .4s;
  mask: 
    /* 生成四个角的透明缺口 */
    conic-gradient(at var(--s) var(--s), #0000 75%, #000 0)
      0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    /* 保留边框区域可见 */
    linear-gradient(#000 0 0) padding-box,
    /* 保留内容区域可见 */
    linear-gradient(#000 0 0) content-box;
  mask-composite: intersect;
}

核心调整：通过mask-composite: intersect确保只有三层mask的重叠区域可见，明确padding-box和content-box的范围，彻底解决边框重叠问题。

方案二：伪元素实现（更直观易调试） #

如果mask逻辑不好把控，用伪元素可以更清晰地实现效果，完全避免重叠问题：

div {
  --s: 50px; /* 切角大小 */
  --t: 5px;  /* 边框厚度 */
  --g: 20px; /* 内容与边框的间距 */
  --border-color: #B38184;
  --corner-color: #fff;

  position: relative;
  box-sizing: border-box;
  padding: calc(var(--g) + var(--t));
  background: var(--corner-color);
}

div::before {
  content: "";
  position: absolute;
  inset: var(--t);
  border: var(--t) solid var(--border-color);
  /* 裁剪出四个角的缺口，让底层白色背景透出 */
  clip-path: polygon(
    var(--s) 0, 100% 0, 100% calc(100% - var(--s)),
    calc(100% - var(--s)) 100%, 0 100%, 0 var(--s)
  );
}

解释：伪元素生成完整的灰色边框，再用clip-path裁剪出四个角的缺口，div本身的白色背景会透过缺口显示为白色切角，兼容性更好且逻辑更直观。

关键提示 #

• 两个方案都可通过修改--s、--t、--g三个变量快速调整效果
• 伪元素方案无需考虑mask属性的浏览器兼容性，适配范围更广
• 如果div内有复杂内容，伪元素默认处于底层，不会遮挡内容

内容的提问来源于stack exchange，提问作者belka