Hàm radial-gradient
Hàm radial-gradient xác định gradient
xuyên tâm. Hàm này được áp dụng cho các thuộc tính
xác định hình nền: background,
background-image
hoặc hình viền: border-image,
background-image-source.
Cú pháp
bộ chọn {
background: radial-gradient([hình dạng loại vị trí], màu1 kích thước1, màu2 kích thước2...);
}
Giá trị
| Giá trị | Mô tả |
|---|---|
| hình dạng |
Các giá trị có thể:
ellipse gradient hình elip (mặc định),
circle gradient hình tròn.
|
| loại |
Xác định độ giãn của gradient.
Các giá trị có thể:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| vị trí |
Sau từ khóa at
chỉ định vị trí bằng bất kỳ đơn vị nào cho kích thước
hoặc bằng các từ khóa top, bottom,
left, right, center
trong các tổ hợp khác nhau.
|
| màu1 | Màu bắt đầu của gradient bằng bất kỳ đơn vị nào cho màu sắc. |
| màu2 | Màu kết thúc của gradient bằng bất kỳ đơn vị nào cho màu sắc. |
| kích thước | Xác định độ dài của một màu cụ thể trong gradient bằng bất kỳ đơn vị nào cho kích thước. |
Giá trị cho loại
| Giá trị | Mô tả |
|---|---|
closest-side |
Hình dạng gradient trùng với cạnh gần nhất của khối. |
closest-corner |
Hình dạng gradient được tính dựa trên thông tin khoảng cách đến góc gần nhất của khối. |
farthest-side |
Gradient mở rộng đến cạnh xa nhất của khối. |
farthest-corner |
Hình dạng gradient được tính dựa trên thông tin khoảng cách đến góc xa nhất của khối. |
Lưu ý
Loại và hình dạng có thể đổi chỗ cho nhau, nhưng vị trí phải nằm ở cuối tham số đầu tiên. Loại gradient và kích thước của nó không hoạt động cùng nhau (hợp lý, vì chúng xung đột). Kích thước sẽ được ưu tiên.
Ví dụ . Biến thể đơn giản nhất
Hãy chỉ định màu bắt đầu và màu kết thúc:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Ví dụ . Thêm vị trí
Hãy chỉ định vị trí tâm:
30px - lề trái, 100px - lề trên:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Ví dụ . Vị trí theo phần trăm
Hãy chỉ định vị trí tâm theo phần trăm:
30% - lề trái, 50% - lề trên:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Ví dụ . Vị trí bằng từ khóa
Có thể sử dụng các từ khóa
top, bottom, left,
right, center trong các
tổ hợp khác nhau. Ví dụ, đặt gradient
bên phải ở giữa:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Ví dụ . Kích thước gradient
Trong trường hợp này gradient sẽ hoạt động như sau:
từ 0px đến 20px sẽ là màu đỏ thuần,
từ 20px đến 60px - gradient
từ đỏ sang xanh da trời, sau 60px - màu xanh da trời thuần:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Ví dụ . Nhiều màu liên tiếp
Trong trường hợp này gradient sẽ hoạt động như sau:
từ 0px đến 20px sẽ là màu đỏ thuần,
từ 20px đến 40px
sẽ là màu xanh da trời thuần, từ 40px
đến 60px - gradient từ xanh da trời sang xanh lá,
sau 60px - màu xanh lá thuần:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Ví dụ . Kích thước + vị trí
Hãy đồng thời chỉ định kích thước cho các màu khác nhau và vị trí tâm gradient:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Ví dụ . Hình dạng gradient
Hình dạng gradient được chỉ định bởi tham số đầu tiên
và có thể nhận 2 giá trị: circle
(gradient hình tròn) hoặc ellipse (gradient hình elip,
mặc định). Tại sao cho đến bây giờ
chúng ta không thấy gradient hình elip, mặc dù
nó được đặt mặc định? Bởi vì trước đó
hình dạng của các khối là hình vuông. Nếu chúng ta thay đổi
hình dạng thành hình chữ nhật, thì sẽ thấy gradient hình elip:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Ví dụ . Gradient hình tròn
Hãy tạo gradient hình tròn trong khối
hình chữ nhật. Để làm điều này, hãy chỉ định
hình dạng gradient làm tham số đầu tiên bằng từ khóa
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Ví dụ . Thêm vị trí
Hãy thêm vị trí gradient vào mã trước đó:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại farthest-corner + circle
Hình dạng gradient được tính dựa trên thông tin về khoảng cách đến góc xa nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại farthest-corner + ellipse
Hình dạng gradient được tính dựa trên thông tin về khoảng cách đến góc xa nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại farthest-side + circle
Gradient mở rộng đến cạnh xa nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại farthest-side + ellipse
Gradient mở rộng đến cạnh xa nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại closest-corner + circle
Hình dạng gradient được tính dựa trên thông tin về khoảng cách đến góc gần nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại closest-corner + ellipse
Hình dạng gradient được tính dựa trên thông tin về khoảng cách đến góc gần nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại closest-side + circle
Hình dạng gradient trùng với cạnh gần nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ví dụ . Loại closest-side + ellipse
Hình dạng gradient trùng với cạnh gần nhất của khối:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Xem thêm
-
hàm
linear-gradient,
tạo gradient tuyến tính -
hàm
repeating-linear-gradient,
tạo gradient tuyến tính lặp lại -
hàm
repeating-radial-gradient,
tạo gradient xuyên tâm lặp lại
