語法
css
/* <color> values */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentColor;
/* Global values */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;
值
正式定義
正式語法
stop-color =
<color>
示例
定義 SVG 漸變的顏色停止點
此示例演示了 stop-color 的基本用法，以及 CSS stop-color 屬性如何優先於 stop-color 屬性。
HTML
我們有一個 SVG，其中包含三個 <rect> 方塊和三個 <linearGradient> 元素。每個漸變都有四個 <stop> 元素，建立從黑色到白色，然後從白色到灰色的漸變；它們之間唯一的區別是 id 值。
html
<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient1">
<stop offset="25%" stop-color="black" />
<stop offset="40%" stop-color="white" />
<stop offset="60%" stop-color="white" />
<stop offset="75%" stop-color="#333333" />
</linearGradient>
<linearGradient id="myGradient2">
<stop offset="25%" stop-color="black" />
<stop offset="40%" stop-color="white" />
<stop offset="60%" stop-color="white" />
<stop offset="75%" stop-color="#333333" />
</linearGradient>
<linearGradient id="myGradient3">
<stop offset="25%" stop-color="black" />
<stop offset="40%" stop-color="white" />
<stop offset="60%" stop-color="white" />
<stop offset="75%" stop-color="#333333" />
</linearGradient>
</defs>
<rect x="2" y="10" width="80" height="80" fill="url('#myGradient1')" />
<rect x="92" y="10" width="80" height="80" fill="url('#myGradient2')" />
<rect x="182" y="10" width="80" height="80" fill="url('#myGradient3')" />
</svg>
CSS
我們包含一個 stroke 和 stroke-width 來勾勒矩形。我們使用 stop-color 屬性定義每個漸變中第一個和最後一個停止點的顏色，覆蓋它們的 stop-color 屬性值。展示了各種 CSS <color> 語法。
css
rect {
stroke: #333333;
stroke-width: 1px;
}
#myGradient1 {
stop:first-of-type {
stop-color: #66ccff;
}
stop:last-of-type {
stop-color: #f4aab9;
}
}
#myGradient2 {
stop:first-of-type {
stop-color: yellow;
}
stop:last-of-type {
stop-color: purple;
}
}
#myGradient3 {
stop:first-of-type {
stop-color: hsl(0deg 90% 50%);
}
stop:last-of-type {
stop-color: hsl(20deg 60% 50%);
}
}
結果
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # StopColorProperty |
瀏覽器相容性
載入中…
另見
- SVG
stop-color屬性 - 表示屬性：
stop-color、clip-rule、color-interpolation-filters、fill-opacity、fill-rule、fill、marker-end、marker-mid、marker-start、shape-rendering、stop-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-opacity、stroke-width、text-anchor和vector-effect opacitybackground-color<color><basic-shape>資料型別