Html 使用边界半径时的虚线边界笔划距离

我想增加边界笔划之间的距离。我尝试了不同的方法

例如：

但当我使用边界半径时，它不能正常工作。

试试这个

---

您可以使用以下代码：

#border {
    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='20' ry='20' stroke='%2350535AFF' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='81' stroke-linecap='round'/%3e%3c/svg%3e");
    border-radius: 20px;
    height: 80px;
    line-height: 80px;
    font-size: $sama-font-size-3;
    color: mat-color($mat-sama-gray, 58);
    text-align: center;
    cursor: pointer;
}

您可以从以下站点在线生成代码：

你可以从中看到结果

#border {
    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='20' ry='20' stroke='%2350535AFF' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='81' stroke-linecap='round'/%3e%3c/svg%3e");
    border-radius: 20px;
    height: 80px;
    line-height: 80px;
    font-size: $sama-font-size-3;
    color: mat-color($mat-sama-gray, 58);
    text-align: center;
    cursor: pointer;
}