Giới thiệu về Conic Gradients trong CSS

Ta đã có thể tạo gradient tuyến tính và gradient xuyên tâm với CSS khá dễ dàng và bây giờ có loại gradient thứ 3 sẽ được xác định trong thông số kỹ thuật . Các gradient conic tương tự như gradient xuyên tâm, ngoại trừ các điểm dừng màu nằm ở cạnh ngoài của hình tròn được tạo.

Ví dụ: đây là một gradient xuyên tâm và một gradient conic có cùng màu dừng:

.gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.radial {
  background: radial-gradient(#FAE042, #4AAE9B);
}
.conic {
  background: conic-gradient(#FAE042, #4AAE9B);
}

Và đây là đánh dấu:

<div class="gradient radial"></div>
<div class="gradient conic"></div>

Thêm Ví dụ / Cú pháp

Các gradient conic có thể có nhiều điểm dừng màu:

.conic {
  background: conic-gradient(cyan, magenta, yellow, black);
}

Mỗi màu có thể chỉ định vị trí dừng của nó bằng cách sử dụng các đơn vị như độ, lượt hoặc tỷ lệ phần trăm:

.conic {
  background: conic-gradient(red 180deg, #4AAE9B);
}
.conic-2 {
  background: conic-gradient(red 180deg 90%, #4AAE9B);
}

Lưu ý cách giá trị vị trí thứ hai cho điểm dừng màu xác định quá trình chuyển đổi.

Điểm dừng khó

Các điểm dừng màu có thể chuyển sang màu tiếp theo ngay lập tức bằng cách loại bỏ sự chuyển đổi giữa hai điểm dừng:

.conic-4 {
  background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
}

từ và tại Từ khóa

Bạn có thể chỉ định góc bắt đầu bằng từ khóa from :

.conic {
  background: conic-gradient(from 45deg, cyan, magenta, yellow);
}

Hơn nữa, bạn có thể sử dụng từ khóa at để chỉ định trung tâm của quá trình chuyển đổi:

.conic {
  background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}

Rất tiếc, tôi không thể hiển thị ví dụ về việc sử dụng tại thời điểm này vì tại thời điểm viết bài này, có một lỗi trong polyfill có thể làm cho tất cả các ví dụ khác bị lỗi khi được xem trong trình duyệt dựa trên polyfill.

Chuyển tiếp mượt mà

Để chuyển tiếp mượt mà, hãy đặt điểm dừng màu cuối cùng giống với màu đầu tiên:

.conic {
  background: conic-gradient(cyan, magenta, yellow, cyan);
}

Lặp lại Gradients Conic

Ngoài ra còn có một chức năng repeating-conic-gradient được dùng để tạo một số mẫu thú vị với các gradient conic:

.conic-repeating {
  background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
}

Polyfill

Tính đến năm 2020, chỉ 85% thiết bị trên toàn thế giới hỗ trợ thuộc tính conic-gradient . Mặc dù vậy, rất may, có một polyfill của @LeaVerou mà ta có thể sử dụng để bắt đầu sử dụng các gradient conic ngay bây giờ.

Để sử dụng polyfill, chỉ cần thêm các tập lệnh không có tiền tố và polyfill gradient hình nón trước thẻ nội dung đóng trong các trang web :

<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>

Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03