Hướng dẫn radial-gradient trong css - radial-gradient trong css
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ạng 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. 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. 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. Cấu trúc cơ bảntag {
background-image: radial-gradient(color1, color2);
} HTML viết:
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Ị
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Ị 0 Hiển thị trình duyệt: RADIAL-GRADIENT 3 GIÁ TRỊ 1 Hiển thị trình duyệt: RADIAL-GRADIENT 3 GIÁ TRỊ 2 Hiển thị trình duyệt: RADIAL-GRADIENT 3 GIÁ TRỊ 3 Hiển thị trình duyệt: RADIAL-GRADIENT 3 GIÁ TRỊ 4 Hiển thị trình duyệt: RADIAL-GRADIENT 3 GIÁ TRỊ 5 Hiển thị trình duyệt: RADIAL-GRADIENT 3 GIÁ TRỊ 6 Hiển thị trình duyệt: REPEATING-RADIAL-GRADIENT 7 Hiển thị trình duyệt: |