Hàm CSS linear-gradient()

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

CSS linear-gradient() Hàm được sử dụng để tạo độ dốc tuyến tính làm nền.

Để tạo độ dốc tuyến tính, bạn phải định nghĩa ít nhất hai điểm màu. Điểm màu là màu bạn muốn thực hiện sự chuyển đổi mượt mà giữa chúng. Bạn cũng có thể thiết lập điểm bắt đầu và hướng (hoặc góc) cũng như hiệu ứng độ dốc.

Ví dụ về độ dốc tuyến tính:

Mô hình

Ví dụ 1

Độ dốc tuyến tính này bắt đầu từ trên cùng. Nó chuyển từ đỏ sang vàng,再到 xanh:

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

Thử ngay

Ví dụ 2

Một độ dốc tuyến tính bắt đầu từ bên trái. Nó chuyển từ đỏ sang xanh:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

Thử ngay

Ví dụ 3

Một độ dốc tuyến tính bắt đầu từ góc trên cùng bên trái (và mở rộng đến góc dưới cùng bên phải):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

Thử ngay

Ví dụ 4

Một độ dốc tuyến tính đã chỉ định góc:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Thử ngay

Ví dụ 5

Một độ dốc tuyến tính chứa nhiều điểm màu:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Thử ngay

Ví dụ 6

Một 渐变 tuyến tính có hai vị trí màu sắc:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Thử ngay

Ví dụ 7

Một 渐变 tuyến tính có độ trong suốt:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Thử ngay

Ngữ pháp CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

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ợ hàm số này.

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 radial-gradient()

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

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

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