如何解决CSS border绘制虚线曲线时上下边缘出现淡入淡出效果的问题

你遇到的边缘淡入淡出是浏览器渲染单侧带圆角虚线边框的默认抗锯齿行为，原生border属性没有参数可以关闭该效果，建议改用background模拟虚线的方案实现，代码如下：

.curve-dashed {
  /* 按需调整容器尺寸 */
  width: 150px;
  height: 300px;
  /* 模拟左侧2px虚线：2px实色，剩余高度透明 */
  background-image: linear-gradient(to bottom, #c6c6c6 2px, transparent 2px);
  /* 背景尺寸：宽度2px对应边框粗细，高度8px对应单段虚线+间隔的总高度，可调整疏密 */
  background-size: 2px 8px;
  /* 背景靠左排列，模拟左侧边框 */
  background-position: left top;
  background-repeat: repeat-y;
  /* 按需调整圆角参数，和你原有设置保持一致 */
  border-radius: 10%/200px;
}

<div class="curve-dashed"></div>

参数调整说明 #

• 可根据业务需求自由调整容器宽高、border-radius圆角参数
• 调整background-size的高度值（示例中为8px）可修改虚线疏密，数值越大虚线间隔越宽
• 修改linear-gradient中的色值即可调整虚线颜色

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