stop-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Thuộc tính stop-color của CSS xác định màu sắc để sử dụng cho phần tử SVG <stop> bên trong một gradient. Nếu có, nó sẽ ghi đè thuộc tính stop-color của phần tử.
Cú pháp
/* Giá trị <color> */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentColor;
/* Giá trị toàn cục */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;
Giá trị
Định nghĩa chính thức
| Initial value | black |
|---|---|
| Applies to | <stop> elements in <svg> |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
stop-color =
<color>
Ví dụ
Xác định điểm dừng màu của gradient SVG
Ví dụ này trình bày trường hợp sử dụng cơ bản của stop-color, và cách thuộc tính CSS stop-color được ưu tiên hơn thuộc tính stop-color.
HTML
Chúng ta có một SVG với ba hình vuông <rect> và ba phần tử <linearGradient>. Mỗi gradient có bốn phần tử <stop> tạo ra các gradient từ đen sang trắng rồi từ trắng sang xám; sự khác biệt duy nhất giữa chúng là giá trị id.
<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
Chúng ta bao gồm stroke và stroke-width để tạo đường viền cho hình chữ nhật. Chúng ta xác định màu của điểm dừng đầu tiên và cuối cùng trong mỗi gradient, ghi đè giá trị thuộc tính stop-color của chúng, bằng cách sử dụng thuộc tính stop-color. Các cú pháp CSS <color> khác nhau được hiển thị.
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%);
}
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StopColorProperty |
Khả năng tương thích trình duyệt
Xem thêm
- Thuộc tính SVG
stop-color - Thuộc tính trình bày:
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, vàvector-effect opacitybackground-color<color>- Kiểu dữ liệu
<basic-shape>