hàm conic-gradient() trong CSS

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

CSS của conic-gradient() hàm sẽ thiết lập锥形 渐变 làm ảnh nền hình ảnh.

锥形 渐变 là một 渐变 màu chuyển đổi xung quanh điểm trung tâm quay (giống như bánh mì và bánh xe màu).

Để tạo锥形 渐变, bạn phải ít nhất định nghĩa hai điểm dừng màu.

ví dụ锥形 渐变：

thực tế

ví dụ 1

Có ba màu của锥形 渐变：

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Thử ngay

ví dụ 2

Có năm màu của锥形 渐变：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Thử ngay

ví dụ 3

Có ba màu và chỉ định góc cho mỗi màu của锥形 渐变：

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}

Thử ngay

ví dụ 4

Thông qua việc thêm border-radius: 50% để锥形 渐变 看起来像 饼图：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Thử ngay

Mẫu 5

Dần đổi tròn có góc bắt đầu:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

Thử ngay

Mẫu 6

Dần đổi tròn có vị trí tâm:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Thử ngay

Mẫu 7

Dần đổi tròn có cả góc bắt đầu và vị trí tâm:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Thử ngay

Mẫu 8

Mẫu hình tròn khác:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Thử ngay

Cú pháp CSS

background-image: conic-gradient([from Góc] Vị trí,] Độ màu, Độ màu, ... );

Chi tiết kỹ thuật

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ợ đầy đủ hàm này.

Trang liên quan

Hướng dẫn:Dần đổi trong CSS

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

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

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

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

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

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