- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- Radial gradient
radial-gradient là gì?
Bài học này học để biết thêm, chứ thực tế rất ít khi sử dụng.
8 là dạngradial gradient
9 dạng hình tròn hoặc cong [radial] có biên độ màu sắc giảm dần, hoặc thay đổi từ màu này sang màu khác.radial gradient
Cách thể hiện màu sắc của radial gradient rất đa dạng, nên người viết code sẽ sử dụng tool để điều chỉnh theo đúng ý đồ mình, các bạn có thể tham khảo tool tạo
8.radial gradient
Dưới đây, ta sẽ lần lượt viết một vài cấu trúc đơn giản, thường dùng của
8.radial gradient
Cấu trúc cơ bản
tag {
background-image: radial-gradient[color1, color2];
}
HTML viết:
radial gradient
RADIAL-GRADIENT 2 GIÁ TRỊ
div {
background-image: radial-gradient[#476CFF, #FFEF5C];
height: 200px;
width: 400px;
}
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
div {
background-image: radial-gradient[#476CFF, #FFEF5C, #666666];
height: 200px;
width: 400px;
}
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
div {
background-image: radial-gradient[#FF0000, #FF913D, #FFFF00, #06CF1A, #66FAFF, #7A7AFF, #CC40FF];
height: 200px;
width: 400px;
}
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
RADIAL-GRADIENT NHIỀU GIÁ TRỊ
Cấu trúc radial - phần trăm
div { background-image: radial-gradient[#476CFF 20%, #FFEF5C 50%, #666 80%]; height: 200px; width: 400px; }
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
tag {
background-image: radial-gradient[hướng, color1, color2];
}
RADIAL-GRADIENT NHIỀU GIÁ TRỊ
Cấu trúc tuyến tính [radial] theo hướng | Các giá trị hướng có thể có: | |
Giá trị | Mô tả | |
Ví dụ | at left top | |
Trung tâm shadow sẽ bắt đầu từ bên trái ở trên [bắt đầu từ color1] | at center top | |
Trung tâm shadow sẽ bắt đầu từ trung tâm ở trên [bắt đầu từ color1] | at right top | |
Trung tâm shadow sẽ bắt đầu từ bên phải ở trên [bắt đầu từ color1] | at left center | |
Trung tâm shadow sẽ bắt đầu từ bên trái ở giữa [bắt đầu từ color1] | at center center | |
Trung tâm shadow sẽ bắt đầu từ ngay trung tâm [bắt đầu từ color1] | at right center | |
Trung tâm shadow sẽ bắt đầu từ bên phải ở giữa [bắt đầu từ color1] | at left bottom | |
Trung tâm shadow sẽ bắt đầu từ bên trái ở dưới [bắt đầu từ color1] | at center bottom |
Trung tâm shadow sẽ bắt đầu từ trung tâm ở dưới [bắt đầu từ color1]
div {
background-image: radial-gradient[at left top, #476CFF, #FFEF5C];
height: 200px;
width: 400px;
}
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
div {
background-image: radial-gradient[at center top, #476CFF, #FFEF5C];
height: 200px;
width: 400px;
}
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
0radial gradient
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
1radial gradient
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
2radial gradient
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
3radial gradient
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
4radial gradient
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
5radial gradient
Hiển thị trình duyệt:
RADIAL-GRADIENT 3 GIÁ TRỊ
6radial gradient
Hiển thị trình duyệt:
REPEATING-RADIAL-GRADIENT
7radial gradient
Hiển thị trình duyệt: