Hàm CSS repeating-conic-gradient()

Định nghĩa và cách sử dụng

CSS repeating-conic-gradient() Hàm được sử dụng để giải thích锥 hình tròn lặp lại.

Ví dụ:

锥 hình tròn Giải thích锥 hình tròn lặp lại
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

Thực hành

Ví dụ 1

Một dải锥 hình lặp lại:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

Thử ngay

Ví dụ 2

Định nghĩa dải锥 hình lặp lại với điểm bắt đầu và kết thúc màu:

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Thử ngay

Ví dụ 3

Một dải锥 hình lặp lại khác đã thiết lập góc bắt đầu và vị trí tâm:

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Thử ngay

Cú pháp CSS

repeating-conic-gradient([from góc] vị trí,] độ màu, độ màu, ... );
Giá trị Mô tả
from góc

Tùy chọn. Toàn bộ dải锥 hình sẽ quay theo góc này.

Mặc định là 0deg.
at vị trí

Tùy chọn. Định nghĩa điểm tâm của dải锥 hình.

Mặc định là center.
độ màu, ... , độ màu

Điểm kết thúc màu là màu mà bạn muốn hiển thị chuyển đổi mượt mà giữa chúng.

Giá trị này bao gồm giá trị màu và một hoặc hai vị trí dừng tùy chọn (góc từ 0 đến 360 độ hoặc phần trăm từ 0% đến 100%)

Chi tiết kỹ thuật

Phiên bản: CSS Images Module Level 4

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

Trang liên quan

Hướng dẫn:CSS 渐变

Tham khảo:Thuộc tính background-image CSS

Tham khảo:Hàm số CSS conic-gradient()

Tham khảo:Hàm số CSS linear-gradient()

Tham khảo:Hàm số CSS radial-gradient()

Tham khảo:Hàm repeating-linear-gradient() trong CSS

Tham khảo:Hàm số CSS repeating-radial-gradient()