如何使用CSS为页眉标题添加局部边框？

可以实现该效果，以下是两种常用的可直接复用的实现方式：

• 方案1：多层background + clip-path（兼容性最优）
  通过背景分层实现渐变边框效果，再用clip-path裁切出右上角缺角，兼容Chrome 55+、Firefox 54+等绝大多数主流浏览器：

.custom-border {
  width: 300px;
  height: 180px;
  /* 第一层为内容区背景，第二层为渐变边框背景 */
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, #f093fb 0%, #f5576c 100%) border-box;
  border: 2px solid transparent;
  /* 裁切右上角30px尺寸的缺角，可按需调整数值修改缺角大小 */
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  box-sizing: border-box;
  padding: 16px;
}

• 方案2：border-image + mask（写法更简洁）
  利用边框渐变和遮罩实现，适合需要频繁调整边框样式的场景，注意mask-composite属性需要适配部分低版本浏览器：

.custom-border {
  width: 300px;
  height: 180px;
  border: 2px solid;
  /* 渐变边框设置，修改色值即可调整边框渐变效果 */
  border-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%) 1;
  /* 遮罩排除内容区，仅保留边框区域显示 */
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  box-sizing: border-box;
  padding: 16px;
}

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