如何用CSS实现虚线圆角线性渐变边框并控制描边长度

你现有代码无法实现预期效果主要有3个问题：

• width、height属性值缺少单位，CSS中除0值外的长度值必须携带单位（当前场景应使用px），否则样式会直接失效
• 斜纹重复渐变和彩色渐变直接铺满整个圆形区域，没有做环形挖空，导致整个圆形都被条纹覆盖，没有留出中间的空白区域
• 没有限制渐变的显示范围，无法实现仅环形区域显示条纹+渐变的效果

使用CSS mask 遮罩做环形挖空是最简洁的实现方式，不需要额外嵌套多余DOM元素：

.ring {
  /* 宽高记得带上px单位 */
  width: 170px;
  height: 170px;
  border-radius: 50%;
  /* 自定义环的粗细 */
  --ring-width: 8px;
  background: 
    /* 上层：白色斜纹 */
    repeating-linear-gradient(300deg, transparent 0 4px, #ffffff 4px 6px),
    /* 下层：粉到红的渐变底色 */
    linear-gradient(300deg, #EC74E7 0%, #EC74E7 35%, #FF3055 80%, #FF3055 100%);
  /* 遮罩挖空中间区域，仅显示外环 */
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--ring-width)), #000 0);
          mask: radial-gradient(circle, transparent calc(50% - var(--ring-width)), #000 0);
}

如果需要在圆形中间放置头像、文字等内容，推荐用伪元素承载环形样式，避免遮罩影响内部内容显示：

.ring-container {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  position: relative;
  /* 内部内容自动居中 */
  display: grid;
  place-items: center;
}
/* 伪元素实现斜纹渐变环 */
.ring-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  --ring-width: 8px;
  background: 
    repeating-linear-gradient(300deg, transparent 0 4px, #ffffff 4px 6px),
    linear-gradient(300deg, #EC74E7 0%, #EC74E7 35%, #FF3055 80%, #FF3055 100%);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--ring-width)), #000 0);
          mask: radial-gradient(circle, transparent calc(50% - var(--ring-width)), #000 0);
}
/* 中间内容样式，以头像为例 */
.ring-container .avatar {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 50%;
  object-fit: cover;
}

• 修改--ring-width变量值可以调整环形边框的粗细
• 修改重复线性渐变里的0 4px/4px 6px数值，可以调整斜纹的宽度和间隔大小
• 修改渐变角度300deg可以调整斜纹的倾斜方向
• 替换下层渐变的色值，可以自定义环的渐变配色

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