使用 border-radius 时的虚线边框描边距离
dashed border stroke distance when use border-radius
我想增加边框笔画之间的距离。我尝试了不同的方法。
例如:enter link description here
但是当我使用 border-radius 时它不能正常工作。
试试这个 JSFiddle
#border {
width: 250px;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue
50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%),
linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
background-position: top, right, bottom, left;
background-repeat: repeat-x, repeat-y;
background-size: 10px 1px, 1px 10px;
border-radius: 30px;
}
您可以使用以下代码:
#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;
}
您可以从以下站点在线生成代码:
Customize your CSS Border
你可以看到 JSFiddle
的结果
我想增加边框笔画之间的距离。我尝试了不同的方法。
例如:enter link description here
但是当我使用 border-radius 时它不能正常工作。
试试这个 JSFiddle
#border {
width: 250px;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue
50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%),
linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
background-position: top, right, bottom, left;
background-repeat: repeat-x, repeat-y;
background-size: 10px 1px, 1px 10px;
border-radius: 30px;
}
您可以使用以下代码:
#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;
}
您可以从以下站点在线生成代码: Customize your CSS Border
你可以看到 JSFiddle
的结果