本文详解如何通过组合 css `border-radius` 与 svg `stroke-linecap` 属性，解决内联 svg 虚线背景在圆角容器中边缘被硬截断（capped）的问题，确保虚线自然闭合、视觉连贯。
在使用内联 SVG 作为 background-image 创建虚线边框（如通过 Dashed Border Generator 生成）时，一个常见视觉缺陷是：即使 SVG 中 <rect> 已设置 rx="100%" 实现圆角，渲染后虚线的起止端仍可能在容器边缘“被截断”或“突兀收尾”，表现为线条末端方正、不贴合圆角弧度——这并非 SVG 绘制错误，而是CSS 盒模型裁剪与 SVG 渲染边界未对齐所致。
根本原因在于：SVG <rect> 的 rx/ry 仅控制矩形自身的圆角路径，但当该 SVG 作为背景平铺或拉伸到带圆角的 HTML 元素上时，若元素自身未声明 border-radius，浏览器会按默认直角盒模型渲染，导致背景 SVG 的圆角区域被父容器的硬边界裁切（即“capped”效果）。
✅ 正确解法是 双层圆角协同：
- SVG 内部 <rect> 保留 rx="100%" ry="100%" 定义路径圆角；
- 同时，CSS 元素必须显式设置 border-radius: 100%（或其他匹配值），使整个元素的渲染边界与 SVG 路径一致，避免裁剪。
以下是修复后的完整代码：
立即学习“前端免费学习笔记（深入）”；
.block {
width: 400px;
height: 400px;
/* 关键：必须添加 border-radius，与 SVG rx 值语义对齐 */
border-radius: 100%;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%25' ry='100%25' stroke='%238B98A6' stroke-width='9' stroke-dasharray='2%2c 8' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
}<div class="block"></div>
⚠️ 注意事项：
- stroke-linecap="butt" 是当前 SVG 中的合理选择（避免线端额外延伸），无需修改；真正起作用的是外部 border-radius；
- 若需适配不同尺寸容器（如非正方形），请将 border-radius: 100% 替换为具体像素值（如 border-radius: 24px），并确保 SVG 中 rx/ry 与之数值一致；
- 避免仅依赖 SVG 圆角而忽略 CSS border-radius —— 这是导致“边缘 capped”的最常见疏漏；
- 在高缩放或 Retina 屏下，可添加 background-size: cover 确保 SVG 自适应填充，防止模糊或留白。
总结：内联 SVG 虚线边框的圆角完整性 = SVG 路径圆角 + CSS 元素圆角渲染边界的双重保障。缺一不可。
