hàm repeating-linear-gradient() trong CSS

Trang trước Hàm repeating-conic-gradient() CSS
Trang tiếp theo Hàm repeating-radial-gradient() CSS
Quay lại lớp trên Sách tham khảo hàm CSS

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

CSS repeating-linear-gradient() hàm được sử dụng để tích hợp tuyến tính lặp lại.

ví dụ:

tích hợp tuyến tính	tích hợp线性渐变

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

thực thể

Ví dụ 1

Một dần lặp lại linearity:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Thử ngay

Ví dụ 2

Các dần lặp lại khác nhau:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Thử ngay

Ngữ pháp CSS

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

Giá trị	Mô tả
angle	Định nghĩa góc hướng của dần. Từ 0deg đến 360deg. Giá trị mặc định là 180deg.
side-or-corner	Định nghĩa vị trí bắt đầu của đường dần. Nó bao gồm hai từ khóa: từ khóa đầu tiên biểu thị hướng ngang (left hoặc right), từ khóa thứ hai biểu thị hướng dọc (top hoặc bottom). Thứ tự không quan trọng và mỗi từ khóa đều là tùy chọn.
color-stop1, color-stop2,...	Điểm kết thúc màu là màu mà bạn muốn hiển thị chuyển đổi mượt mà giữa chúng. Giá trị này bao gồm giá trị màu và một hoặc hai vị trí dừng tùy chọn (phần trăm từ 0% đến 100% hoặc độ dài theo trục dần)

Giá trị

Mô tả

angle

Định nghĩa góc hướng của dần. Từ 0deg đến 360deg. Giá trị mặc định là 180deg.

side-or-corner

Định nghĩa vị trí bắt đầu của đường dần.

Nó bao gồm hai từ khóa: từ khóa đầu tiên biểu thị hướng ngang (left hoặc right), từ khóa thứ hai biểu thị hướng dọc (top hoặc bottom).

Thứ tự không quan trọng và mỗi từ khóa đều là tùy chọn.

color-stop1, color-stop2,...

Điểm kết thúc màu là màu mà bạn muốn hiển thị chuyển đổi mượt mà giữa chúng.

Giá trị này bao gồm giá trị màu và một hoặc hai vị trí dừng tùy chọn (phần trăm từ 0% đến 100% hoặc độ dài theo trục dần)