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 # 指定描邊繪製 |
瀏覽器相容性
載入中…