Hàm radial-gradient() của CSS

Trang trước Hàm pow() trong CSS
Trang tiếp theo Hàm ray() trong CSS
Quay lại層 trên Sách tham khảo hàm CSS

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

CSS radial-gradient() Hàm thiết lập dải mờ theo phương径向 làm ảnh nền hình ảnh.

Dải mờ theo phương径向 được định nghĩa bởi tâm của nó.

Để tạo dải mờ theo phương径向, bạn phải định nghĩa ít nhất hai màu sắc.

Ví dụ dải mờ theo phương径向:

Mô hình

Ví dụ 1

Phân phối đều của dải mờ theo phương径向:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Thử ngay

Ví dụ 2

Phân phối màu sắc khác nhau của dải mờ theo phương径向:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Thử ngay

Ví dụ 3

Chuyển dần tròn hình tròn:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Thử ngay

Ví dụ 4

Sử dụng từ khóa kích thước khác nhau cho chuyển dần tròn:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Thử ngay

Cú pháp CSS

radial-gradient(shape size at position, start-color, ... , last-color);

Giá trị	Mô tả
shape	Định nghĩa hình dạng của chuyển dần. Các giá trị có thể là: ellipse (mặc định) circle
size	Định nghĩa kích thước của chuyển dần. Các giá trị có thể là: farthest-corner (mặc định) closest-side closest-corner farthest-side
position	Định nghĩa vị trí của chuyển dần. Giá trị mặc định là "center".
start-color, ... , last-color	Màu sắc chỉ báo là màu sắc mà bạn muốn có sự chuyển đổi mượt mà giữa chúng. Giá trị này bao gồm một giá trị màu sắc, sau đó là một hoặc hai vị trí chỉ báo màu tùy chọn (phan trăm từ 0% đến 100% hoặc độ dài theo trục chuyển dần).