CSS stroke-* 属性完全指南：从基础到进阶

一、描边基础：颜色与粗细

1.1 stroke（描边颜色）

设置图形轮廓的颜色，支持任何有效的颜色值（十六进制、RGB、HSL、颜色关键字等），也可以使用 currentColor 继承当前文本颜色。

/* SVG 元素中使用 */
path {
  stroke: #2c3e50;
  stroke: rgb(231, 76, 60);
  stroke: currentColor;
}

• 注意：stroke 属性也可以作为 CSS 属性直接应用于 HTML 元素（如 span ），但需要浏览器支持（通常用于文本描边时需加 -webkit- 前缀）。

1.2 stroke-width（描边宽度）

定义描边的粗细。可以使用数值（px、em、rem）或百分比。百分数值始终以标准化 viewBox 的对角线长度的百分比计算。

viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。

viewBox 属性的值是一个包含 4 个参数的列表 min-x, min-y, width and height，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素，查看属性preserveAspectRatio。

不允许宽度和高度为负值，0 则禁用元素的呈现。

line {
  stroke-width: 2px;   /* 固定像素 */
  stroke-width: 0.2em; /* 相对单位 */
  stroke-width: 3%;    /* 百分比 */
}

• 最佳实践：避免使用小于 0.5px 的描边，可能导致渲染模糊；在响应式设计中，可考虑使用 em 或百分比，让描边随文字或容器缩放。

二、控制线条的端点与连接

2.1 stroke-linecap（端点样式）

决定开放路径两端点的形状。

• butt（默认）：线条在端点处平齐结束。

• round：端点呈半圆形，半径等于线宽的一半。

• square：端点呈方形，向外延伸半个线宽的长度。

path {
  stroke-linecap: round; /* 更圆润的端点，常用于地图路线 */
}

2.2 stroke-linejoin（连接样式）

控制两条线段相交处的形状。

• miter（默认）：尖角连接，通过延长外边缘形成尖角。

• round：圆角连接，以半径为线宽一半的圆弧过渡。

• bevel：平角连接，通过填充三角形缺口形成平坦效果。

polygon {
  stroke-linejoin: round; /* 让折线转折更柔和 */
}

2.3 stroke-miterlimit（尖角限制）

当使用 miter 连接时，限制尖角的长度。如果尖角长度超过 miterlimit × stroke-width，则自动转换为 bevel 连接。默认值为 4，取值范围必须 ≥ 1。

path {
  stroke-miterlimit: 2.5; /* 允许更尖锐的角，但不超过线宽的2.5倍 */
}

工作原理：尖角长度 = 线宽 / sin(夹角/2)。夹角越小，尖角越长。设置合适的 miterlimit 可防止尖角过长破坏图形美感。

三、虚线之美：dasharray 与 dashoffset

3.1 stroke-dasharray（虚线模式）

通过定义实线和空白的长度序列，创建虚线效果。

.stroke-simple {
  stroke-dasharray: 10;      /* 10实线，10空白，重复 */
}
.stroke-alternate {
  stroke-dasharray: 10 5;    /* 10实线，5空白，10实线... */
}
.stroke-complex { 
  stroke-dasharray: 20 10 5; /* 20实，10空，5实，20空，10实，5空...（奇数会重复整个序列）*/ 
}

• 注意：如果提供奇数个数值，浏览器会自动复制一份以形成偶数序列。例如 5 10 15 相当于 5 10 15 5 10 15。

3.2 stroke-dashoffset（虚线偏移）

设置虚线模式的起始偏移量，是实现线条生长动画的关键。

.dash-offset-positive {
  stroke-dashoffset: 10; /* 虚线模式整体向前偏移10px */
}
.dash-offset-negative {
  stroke-dashoffset: -10; /* 向后偏移，效果与正值相反 */
}

经典动画：绘制线条

将 dasharray 设置为大于路径长度的值，初始 dashoffset 等于该值，然后动画到 0，即可实现线条从无到有的绘制效果。

.draw-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

四、透明度与绘制顺序

4.1 stroke-opacity（描边透明度）

控制描边的透明度，值范围 0~1 或 0%~100%。

path {
  stroke: #e74c3c;
  stroke-opacity: 0.6; /* 半透明红色描边 */
}

4.2 paint-order（绘制顺序）

虽然不是直接的 stroke-* 属性，但 paint-order 可以控制描边和填充的绘制先后顺序，产生特殊效果。

text {
  paint-order: stroke; /* 先描边后填充，文字轮廓更清晰 */
}

五、复合属性与简写

部分浏览器支持将描边属性合并简写：

path {
  stroke: #3498db 2px dashed;
}

但出于兼容性考虑，建议还是分开书写。

六、CSS 中的文本描边属性

在 CSS 中，有一组与 stroke 相关的属性，用于为文本添加描边效果：

• -webkit-text-stroke：简写属性，同时设置宽度和颜色。

• -webkit-text-stroke-width：设置文本描边宽度。

• -webkit-text-stroke-color：设置文本描边颜色。

.text-stroke {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  /* 或简写为：-webkit-text-stroke: 1px black; */
}

注意：这些 CSS 属性目前主要由 WebKit/Blink 浏览器支持（如 Chrome、Edge、Safari），需要使用 -webkit- 前缀。

与 svg stroke 的区别

七、实际应用示例

示例 1：动态加载指示器

<svg class="loader" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#3498db" stroke-width="4" />
</svg>

.loader circle {
  stroke-dasharray: 125.6; /* 2 * π * 20 ≈ 125.6 */
  stroke-dashoffset: 125.6;
  stroke-linecap: round;
  animation: spin 2s infinite linear;
}

@keyframes spin {
  to {
    stroke-dashoffset: -125.6;
  }
}

示例 2：虚线图表的网格

.grid line {
  stroke: #bdc3c7;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.axis line {
  stroke: #2c3e50;
  stroke-width: 2;
  stroke-linecap: square;
}

示例 3：悬停时描边加粗并变色

.interactive path {
  stroke: #7f8c8d;
  stroke-width: 1.5;
  transition: stroke 0.2s, stroke-width 0.2s;
}

.interactive path:hover {
  stroke: #e67e22;
  stroke-width: 3;
}

八、性能与兼容性提示

• 性能：避免对大量复杂路径同时进行虚线动画，可考虑使用 Canvas 作为替代。动画中使用 stroke-dashoffset 时，推荐配合 transform 属性以减少重绘开销。

• 兼容性：stroke-* 属性在 SVG 元素中普遍支持良好。在普通 HTML 元素上，部分属性（如 stroke）需要特定前缀（如 -webkit-text-stroke）。建议使用前查阅 Can I use。

• 响应式：如需描边随视口缩放，可使用矢量单位 em、rem）或百分比。

总结

stroke-* 系列属性为 Web 图形提供了强大的描边控制能力。从基础的 stroke 和 stroke-width，到精细的端点、连接样式，再到富有动感的虚线模式，每一个属性都能让图形表达更上一层楼。结合 CSS 动画，我们可以创造出无限可能的视觉效果。在实际开发中，请根据场景合理选择属性，注意性能与兼容性，让描边成为你设计语言中不可或缺的一部分。

通过本文的梳理，相信你已经对这些属性有了全面深入的理解。现在，快去你的项目中试试这些技巧，为图形注入灵魂吧！

注意

• SVG stroke 属性：专门用于 SVG 图形元素的轮廓样式。

• CSS 文本描边属性：用于为 HTML 文本添加描边效果。

彩蛋

文中配有完整示例，点击《stroke 描边示例集》即可查看。