stroke

**stroke** CSS 属性定义用于绘制元素描边的颜色或 SVG 绘制服务器。因此，stroke 仅对可以赋予描边的元素有效（例如，<rect> 或 <ellipse>）；有关完整列表，请参阅 SVG stroke 属性页面。声明时，CSS 值会覆盖元素的 stroke SVG 属性的任何值。

注意：根据 2017 年 4 月 4 日的 CSS Fill and Stroke 模块级别 3 规范草案，stroke 属性是许多其他描边属性的简写形式。在实践中，截至 2024 年 8 月，浏览器不支持通过 stroke 属性设置其他与描边相关的值，例如宽度或虚线图案，而是将其视为 SVG stroke 属性的直接模拟。

语法

css

/* 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>       |
  <gradient>  

<svg-paint> = 
  child               |
  child( <integer> )  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

基本颜色描边

在此示例中，我们创建了两种不同的形状，一个圆形和一个矩形，它们是 <g>（组）的一部分，该组为这两种形状设置了灰色的描边颜色作为默认值。

html

<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 将暗紫色应用于矩形，红色应用于圆形。

css

rect {
  stroke: hsl(270deg 50% 40%);
}
circle {
  stroke: red;
}

图案描边

此示例使用与上一个示例中相同的组和形状（圆形稍微移动了一下），但也定义了一个 SVG 图案。

html

<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 值引用该图案。此图案作为描边绘制应用于这两个形状，结果如图所示。

css

rect,
circle {
  stroke: url(#star);
}

图案相对于形状的边界框绘制，这会导致它们重叠时出现视觉干扰，因为图案的某些部分是透明的。

SVG 与 CSS 渐变

在这里，我们再次使用与第一个示例相同的组和形状标记，但也添加了 SVG 渐变的定义。

html

<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 渐变应用于矩形。对于圆形，我们应用了一个 CSS 线性渐变，其意图等同于 SVG 渐变。

css

rect {
  stroke: url(#greenwhite);
}
circle {
  stroke: linear-gradient(90deg, green, white);
}

只有矩形接收渐变描边，而圆形则回退到组元素设置的灰色描边。发生这种情况是因为 CSS 渐变不是 stroke 属性的有效值，而指向 SVG 渐变的 URL 引用是允许的。

上下文描边

在这种情况下，我们再次从一个组元素开始，在该元素内部定义了两个矩形路径。之后，定义了一个线性渐变和一个 SVG 标记。

html

<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。

css

path {
  stroke: hsl(270deg 50% 40%);
  marker: url(#circle);
}
path:nth-of-type(2) {
  stroke: url(#orangered);
}
marker circle {
  stroke: context-stroke;
}

由于 stroke-context 应用于从 <marker> 元素派生的元素，因此每个圆形的上下文元素是调用 <marker> 元素的元素；也就是说，<path> 元素。结果是，第一个路径上的标记使用调用路径的颜色，为紫色。相比之下，第二个路径上的标记使用与路径相同的橙色到红色的 SVG 渐变。后一种情况说明了如何将 SVG 渐变作为单个渐变应用于整个形状，而不是独立地应用于形状的每个单独部分。

规范

规范
可缩放矢量图形 (SVG) 2 # 指定描边绘制

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

SVG stroke 属性
paint-order