语法
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>数据类型