如何用CSS优化实现指定圆角虚线路径效果？

我想要实现带圆角的虚线路径效果，目前完成的效果中圆角边缘不符合需求，需要优化。

现有代码 #

HTML代码

<div class="col-sm-3 c-col" ng-repeat="n in c.testD">
    <div class="c-d">
    </div>
</div>

CSS代码

.c-row{
    height: 32.5rem;
    background-color: #EEF1FF;
    .c-col{
        height: 32.5rem;
        background-color: #EEF1FF;
        .c-d{
            margin: auto;                   
        }
        &:nth-of-type(odd) {
            border-top:  5px dashed #49A252;
            border-top-left-radius: 4.5rem;
            border-top-right-radius: 4.5rem;
            :before {
                content: "";
                position: absolute;
                right: 0px;
                top: 3.5rem;
                height: 0.1rem;
                height: calc(100% - 7.6rem);
                border-right:  5px dashed #49A252;
              }
          }
          &:first-child{
                border-top-left-radius: 0 !important;
          }
          &:nth-of-type(even) {
             border-bottom: 5px dashed #49A252;
            border-bottom-left-radius: 4.5rem;
            border-bottom-right-radius: 4.5rem;
            :before {
                content: "";
                position: absolute;
                right: 0px;
                bottom: 3.4rem;
                height: 0.1rem;
                height: calc(100% - 7rem);
                border-right:  5px dashed #49A252;
              }
          }
    }
}

问题根源在于原生虚线边框的border-radius渲染效果不稳定，且伪元素与主边框衔接不自然。以下是调整后的代码：

.c-row{
    height: 32.5rem;
    background-color: #EEF1FF;
    .c-col{
        height: 32.5rem;
        background-color: #EEF1FF;
        position: relative; /* 确保伪元素基于当前元素定位 */
        .c-d{
            margin: auto;                   
        }
        &:nth-of-type(odd) {
            /* 用背景渐变绘制带圆角的上虚线边框 */
            background-image: linear-gradient(90deg, #49A252 50%, transparent 50%);
            background-size: 1rem 5px; /* 控制虚线间距和粗细 */
            background-repeat: repeat-x;
            background-position: top;
            border-top-left-radius: 4.5rem;
            border-top-right-radius: 4.5rem;
            background-clip: padding-box; /* 限制背景在圆角范围内 */
            
            &:before {
                content: "";
                position: absolute;
                right: 0;
                top: 4.5rem; /* 对齐圆角底部，避免重叠 */
                width: 5px;
                height: calc(100% - 9rem); /* 减去两倍圆角半径 */
                background-image: linear-gradient(#49A252 50%, transparent 50%);
                background-size: 5px 1rem;
                background-repeat: repeat-y;
            }
        }
        &:first-child{
            border-top-left-radius: 0 !important;
            background-position: top right; /* 第一个元素左侧无需虚线 */
        }
        &:nth-of-type(even) {
            /* 用背景渐变绘制带圆角的下虚线边框 */
            background-image: linear-gradient(90deg, #49A252 50%, transparent 50%);
            background-size: 1rem 5px;
            background-repeat: repeat-x;
            background-position: bottom;
            border-bottom-left-radius: 4.5rem;
            border-bottom-right-radius: 4.5rem;
            background-clip: padding-box;
            
            &:before {
                content: "";
                position: absolute;
                right: 0;
                bottom: 4.5rem; /* 对齐圆角顶部 */
                width: 5px;
                height: calc(100% - 9rem);
                background-image: linear-gradient(#49A252 50%, transparent 50%);
                background-size: 5px 1rem;
                background-repeat: repeat-y;
            }
        }
    }
}

关键调整说明 #

• 替换原生虚线边框为linear-gradient自定义虚线：可精确控制虚线样式，圆角区域渲染更自然
• background-clip: padding-box：保证背景渐变不会超出圆角范围
• 调整伪元素的top/bottom值为圆角半径（4.5rem），让垂直虚线与水平虚线在圆角结束位置精准衔接
• 新增position: relative：确保伪元素的绝对定位基于父元素.c-col

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