stroke
stroke CSS 属性定义了用于绘制元素描边的颜色或 SVG 绘制服务器。因此，stroke 仅对可以赋予描边的元素（例如 <rect> 或 <ellipse>）有效；有关完整列表，请参阅 SVG stroke 属性的页面。声明后，CSS 值会覆盖元素 stroke SVG 属性的任何值。
备注： 根据 2017 年 4 月 4 日的 CSS 填充和描边模块第三级规范草案，stroke 属性是其他一些描边属性的简写。实际上，截至 2024 年 8 月，浏览器还不支持通过 stroke 属性设置其他与描边相关的值（如宽度或虚线模式），而是将其视为 SVG stroke 属性的直接对应物。
语法
/* assorted color values */
stroke: rgb(153 51 102 / 1);
stroke: color-mix(in lch, var(--primaryColor) 35%, gray 15%));
stroke: dodgerblue;
stroke: currentColor;
stroke: transparent;
stroke: context-stroke;
/* Global values */
stroke: inherit;
stroke: initial;
stroke: revert;
stroke: revert-layer;
stroke: unset;
值
<color>-
使用任何有效的 CSS 颜色值设置描边的绘制。
<image>-
使用 SVG 所谓的绘制服务器来设置描边的绘制，在此上下文中，绘制服务器是 SVG 渐变或图案。CSS 渐变不能与
stroke属性一起使用。 context-stroke-
使元素从其上下文元素“继承”其描边定义。如果没有有效的上下文元素，则该值将导致不使用任何绘制来描边。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 作为简写中的每个属性 |
| 继承性 | 是 |
| 计算值 | 作为简写中的每个属性 |
| 动画类型 | 作为简写中的每个属性
|
正式语法
stroke =
<paint>
<paint> =
none |
<image> |
<svg-paint>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<svg-paint> =
child |
child( <integer> )
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
基本颜色描边
在此示例中，我们创建了两个不同的形状：一个圆形和一个矩形，它们是 <g>（组）的一部分，该组具有灰色描边颜色作为两个形状的默认值。
<svg>
<g fill="none" stroke="gray" stroke-width="10">
<circle cx="100" cy="100" r="40" />
<rect x="20" y="20" width="80" height="80" />
</g>
</svg>
然后，我们通过 CSS 为矩形应用了暗紫色，为圆形应用了红色。
rect {
stroke: rebeccapurple;
}
circle {
stroke: red;
}
图案描边
此示例使用了与前一个示例相同的组和形状（圆形移动了一点），但还定义了 SVG 图案。
<svg>
<g fill="none" stroke="gray" stroke-width="23">
<circle cx="150" cy="90" r="40" />
<rect x="20" y="20" width="80" height="80" />
</g>
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
</pattern>
</defs>
</svg>
然后，在 CSS 中通过指向该图案 ID 的 URL 值引用该图案。此图案被应用于两个形状作为描边绘制，结果如图所示。
rect,
circle {
stroke: url("#star");
}
图案是相对于形状的边界框绘制的，这可能导致它们重叠处出现视觉干扰，因为图案的某些部分是透明的。
SVG 渐变与 CSS 渐变
在这里，我们再次使用与第一个示例相同的组和形状标记，但还添加了 SVG 渐变的定义。
<svg>
<g fill="none" stroke="gray" stroke-width="10">
<circle cx="100" cy="100" r="40" />
<rect x="20" y="20" width="80" height="80" />
</g>
<defs>
<linearGradient id="greenwhite">
<stop offset="0%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
</svg>
在 CSS 中，我们使用指向线性渐变 ID 的 URL 值将该 SVG 渐变应用于矩形。对于圆形，我们应用了一个与 SVG 渐变意图相当的 CSS 线性渐变。
rect {
stroke: url("#greenwhite");
}
circle {
stroke: linear-gradient(90deg, green, white);
}
只有矩形获得了渐变描边，而圆形则回退到由组元素设置的灰色描边。发生这种情况是因为 CSS 渐变不是 stroke 属性的有效值，而对 SVG 渐变的 URL 引用是允许的。
上下文描边
在这种情况下，我们再次从一个组元素开始，其中定义了两条矩形形状的路径。之后，定义了线性渐变和 SVG 标记。
<svg>
<g fill="none" stroke="gray" stroke-width="4">
<path d="M 20,20 l 180,0 0,100 -180,0 z" />
<path d="M 100,40 l 180,0 0,100 -180,0 z" />
</g>
<defs>
<linearGradient id="orangered">
<stop offset="0%" stop-color="orange" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<marker
id="circle"
markerWidth="20"
markerHeight="20"
refX="10"
refY="10"
markerUnits="userSpaceOnUse">
<circle
cx="10"
cy="10"
r="8"
stroke-width="4"
stroke="none"
fill="none" />
</marker>
</defs>
</svg>
然后，我们编写 CSS 为两条路径添加标记，并设置暗紫色的描边颜色。对于第二条路径，此设置被覆盖，它被赋予一个 URL 值，以应用橙色到红色的渐变作为其描边。最后，我们将标记元素中的圆形元素的描边值设置为 context-stroke。
path {
stroke: rebeccapurple;
marker: url("#circle");
}
path:nth-of-type(2) {
stroke: url("#orangered");
}
marker circle {
stroke: context-stroke;
}
因为 stroke-context 应用于 <marker> 元素的后代元素，所以每个圆形的上下文元素是调用 <marker> 元素的元素；即 <path> 元素。结果是，第一条路径上的标记使用调用路径的颜色，即紫色。相比之下，第二条路径上的标记使用与该路径相同的橙色到红色的 SVG 渐变。后一种情况说明了 SVG 渐变是如何作为单个渐变应用于整个形状，而不是独立地应用于形状的每个单独部分。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # 指定描边绘制 |
浏览器兼容性
加载中…