如何让径向渐变容器的虚线边框适配左右曲线而非直线？

我用下面的CSS代码实现了带径向渐变的容器，但红色虚线边框是直线样式，怎么让虚线边框适配容器左右两侧的曲线形状，而不是保持直线？

原代码示例 #

CSS

.container {
  width: 160px;
  height: 58px;
  border: 1px dotted red;
 background: radial-gradient(15px at left, #fff 98%, red) left,
    radial-gradient(15px at right, #fff 98%, red) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
}

HTML

<div class='container'>
</div>

解决方案 #

原生border是基于矩形盒子的，没法适配你用径向渐变做的曲线边缘，所以得换掉原生border，用背景层或伪元素模拟适配曲线的虚线边框。这里给你两种可行的实现方式：

方式一：伪元素+遮罩实现（简洁易维护）

用伪元素生成虚线背景，再用和容器一致的径向渐变遮罩，只保留曲线范围内的虚线：

.container {
  width: 160px;
  height: 58px;
  position: relative;
  background: radial-gradient(15px at left, #fff 98%, transparent) left,
    radial-gradient(15px at right, #fff 98%, transparent) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  background-color: #fff;
}

.container::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 生成虚线背景，可通过调整4px/8px控制虚线的虚实长度和间距 */
  background: linear-gradient(to right, red 4px, transparent 4px) 0 0 / 8px 1px repeat-x,
              linear-gradient(to right, red 4px, transparent 4px) 0 100% / 8px 1px repeat-x,
              linear-gradient(to bottom, red 4px, transparent 4px) 0 0 / 1px 8px repeat-y,
              linear-gradient(to bottom, red 4px, transparent 4px) 100% 0 / 1px 8px repeat-y;
  /* 用遮罩裁剪出和容器一致的曲线形状 */
  mask: radial-gradient(15px at left, #fff 98%, transparent) left,
        radial-gradient(15px at right, #fff 98%, transparent) right;
  mask-size: 51% 100%;
  mask-repeat: no-repeat;
  mask-composite: add;
}

方式二：多层背景直接模拟

通过多层背景分别实现上下直线虚线和左右曲线虚线，同时保留原有的白色曲线遮罩：

.container {
  width: 160px;
  height: 58px;
  background-color: #fff;
  /* 多层背景：白色遮罩 + 各边虚线 */
  background-image: 
    /* 左右白色曲线遮罩，和原效果一致 */
    radial-gradient(15px at left, #fff 98%, transparent),
    radial-gradient(15px at right, #fff 98%, transparent),
    /* 顶部虚线：8px间距，4px实线段 */
    linear-gradient(to right, red 4px, transparent 4px),
    /* 底部虚线 */
    linear-gradient(to right, red 4px, transparent 4px),
    /* 左侧上下曲线的虚线点 */
    radial-gradient(circle at 0 10px, red 1px, transparent 1px),
    radial-gradient(circle at 0 20px, red 1px, transparent 1px),
    radial-gradient(circle at 0 38px, red 1px, transparent 1px),
    radial-gradient(circle at 0 48px, red 1px, transparent 1px),
    /* 右侧上下曲线的虚线点 */
    radial-gradient(circle at 160px 10px, red 1px, transparent 1px),
    radial-gradient(circle at 160px 20px, red 1px, transparent 1px),
    radial-gradient(circle at 160px 38px, red 1px, transparent 1px),
    radial-gradient(circle at 160px 48px, red 1px, transparent 1px);
  
  background-size: 
    51% 100%, 51% 100%, /* 左右遮罩尺寸 */
    8px 1px, 8px 1px, /* 上下虚线尺寸 */
    1px 20px, 1px 20px, 1px 20px, 1px 20px, /* 左侧虚线点尺寸 */
    1px 20px, 1px 20px, 1px 20px, 1px 20px; /* 右侧虚线点尺寸 */
  
  background-position: 
    left center, right center, /* 左右遮罩位置 */
    left top, left bottom, /* 上下虚线位置 */
    left 5px, left 15px, left 38px, left 48px, /* 左侧虚线点位置 */
    right 5px, right 15px, right 38px, right 48px; /* 右侧虚线点位置 */
  
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y;
}

核心思路 #

原生border是矩形盒子的属性，无法识别你用径向渐变创造的曲线边缘，所以必须通过背景层或伪元素重新构建边框，同时用和容器形状一致的遮罩（mask）或白色渐变层，把超出曲线范围的边框部分隐藏掉，最终实现适配曲线的虚线边框效果。

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