Ngữ pháp tuyến tính 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 dòng. Xem bài đăng này để biết độ dốc xuyên tâm.

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

/* Defining a direction and adding a 3rd color stop */
.box {
 background: linear-gradient(to top, #211533, #211533,
             #3e275f);
}

/* Direction in degrees instead */
.box {
 background: linear-gradient(135deg, #211533, #211533,
             #3e275f);
}

/* Control over the position of the color stops */
.box {
  background: linear-gradient(135deg, #211533 20%,
              #211533 40%, #3e275f);
}

Phương hướng

Bạn có thể xác định hướng của gradient tuyến tính theo độ hoặc sử dụng một trong các từ khóa sau: trên cùng, trên cùng, sang phải, sang trái, trên cùng bên trái, trên cùng bên phải, dưới cùng bên trái, dưới cùng bên phải.

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: linear-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

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