Radial Gradients trong CSS

---

Đến đây bạn có thể dễ dàng xác định gradient xuyên tâm và tuyến tính trong CSS. Không cần phải tạo hình ảnh trong một phần mềm riêng biệt nữa. Chúng vẫn là những hình ảnh được tạo nội bộ cho trình duyệt, vì vậy bạn cần xác định chúng trong thuộc tính nền hoặc các phần tử của bạn và bạn sẽ có được nhiều sự linh hoạt về hướng và điểm dừng màu.

Ở đây ta sẽ khám phá cú pháp để xác định gradient xuyên tâm. Xem bài đăng này để biết độ dốc dòng.

/* Simplest Case */
.box {
  background: radial-gradient(black, white);
}

/* A circle as the center shape instead
of an ellipse and a 3rd color stop */
.box {
 background: radial-gradient(circle, #211533, #211533,
             #3e275f);
}

/* Control the size of the gradient */
.box {
  background: radial-gradient(farthest-corner at 10px 10px,
              #211533 40%, #3e275f);
}

.box2 {
  background: radial-gradient(
                farthest-side circle at 10px 10px,
                #211533 40%, #3e275f);
}

Màu mặc định cho các trình duyệt không hỗ trợ gradient

Bạn nên xác định một màu cơ bản mặc định mà những người da nâu cũ sẽ sử dụng lại:

.box {
 background: #211533;
 background: radial-gradient(to top, #211533, #211533, #3e275f);
}

Hỗ trợ trình duyệt

Tôi có thể sử dụng css-gradient không? Dữ liệu về hỗ trợ tính năng css-gradient trên các trình duyệt chính từ caniuse.com.

---

---

Các tin liên quan

Ngữ pháp tuyến tính trong CSS
2016-06-12
CSS: so khớp () Pseudo-Class
2016-06-02
Giới thiệu ngắn gọn về các biến CSS (Thuộc tính tùy chỉnh)
2016-06-01
Phát hiện tính năng trong CSS với @supports
2016-05-05
Bộ chọn thuộc tính CSS
2016-02-05
Hàm calc () CSS
2015-10-08
Cách sử dụng Bộ tiền xử lý CSS LESS trên VPS Ubuntu
2014-01-27