CSS实现带半圆效果dotted点状边框的方案及缝隙问题解决

你之前采用内层元素偏移遮挡原生dotted边框的方案，出现间隙的核心原因是：不同浏览器对原生dotted边框的圆点直径、点间默认间距的计算逻辑不统一，手动写的固定偏移量没法和所有浏览器的默认渲染规则完全对齐，很容易出现裁切不全、漏缝的问题。

放弃原生dotted边框+遮挡的思路，直接用CSS径向渐变手动绘制半圆点状边，无需额外嵌套遮挡元素，样式完全可控，不存在跨浏览器渲染差异。

• 实现逻辑：通过径向渐变分别在上、左、右三个边绘制半圆点，通过背景平铺规则控制点的排列间距，点的直边直接贴合内容区边缘，弧面朝外，完全匹配目标效果
• 实现代码如下，点大小、间距、颜色都可以通过CSS变量快速调整：

.pinnwand-header {
  /* 可按需调整的样式变量 */
  --dot-size: 0.33rem;
  --dot-gap: 0.4rem;
  --theme-color: #54BC81;

  position: relative;
  background-color: var(--theme-color);
}

/* 用伪元素绘制点状边，完全不影响内部内容排版 */
.pinnwand-header::before {
  content: "";
  position: absolute;
  /* 伪元素向外扩展半个点的尺寸，刚好容纳完整半圆 */
  top: calc(var(--dot-size) / -2);
  left: calc(var(--dot-size) / -2);
  right: calc(var(--dot-size) / -2);
  bottom: 0;
  /* 三个方向的半圆点绘制 */
  background-image:
    radial-gradient(circle at 50% 0, var(--theme-color) 50%, transparent 50%),
    radial-gradient(circle at 0 50%, var(--theme-color) 50%, transparent 50%),
    radial-gradient(circle at 100% 50%, var(--theme-color) 50%, transparent 50%);
  background-size:
    var(--dot-gap) var(--dot-size),
    var(--dot-size) var(--dot-gap),
    var(--dot-size) var(--dot-gap);
  background-position:
    left top,
    left top,
    right top;
  background-repeat: repeat-x, repeat-y, repeat-y;
  pointer-events: none;
}

/* 删除原有.pinnwand-inner的偏移、宽度调整代码即可，无需额外遮挡元素 */

• 无额外DOM嵌套，代码结构更简洁
• 点的大小、间距完全可控，不存在原生dotted边框的跨浏览器渲染差异，从根源避免间隙问题
• 渲染性能更优，无多层元素叠加偏移带来的额外重绘开销
• 仅需修改顶部CSS变量即可快速调整样式，适配不同设计尺寸需求
• 点状边通过绝对定位的伪元素实现，完全不挤占内部内容空间，不会影响原有排版逻辑

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