Hướng dẫn dùng radial gradient trong PHP
Show 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. radial-gradient là dạng background-color 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 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 radial-gradient. Cấu trúc cơ bảntag { 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 NHIỀU 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: Cấu trúc radial - phần trămtag { background-image: radial-gradient(color1 percent1, color2 percent2); } CSS viết div { background-image: radial-gradient(#476CFF 20%, #FFEF5C 50%, #666 80%); height: 200px; width: 400px; } Hiển thị trình duyệt: Cấu trúc tuyến tính (radial) theo hướngtag { background-image: radial-gradient(hướng, color1, color2); } Các giá trị hướng có thể có:
RADIAL-GRADIENT AT LEFT TOP div { background-image: radial-gradient(at left top, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT CENTER TOP div { background-image: radial-gradient(at center top, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT RIGHT TOP div { background-image: radial-gradient(at right top, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT LEFT CENTER div { background-image: radial-gradient(at left center, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT CENTER CENTER div { background-image: radial-gradient(at center center, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT RIGHT CENTER div { background-image: radial-gradient(at right center, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT LEFT BOTTOM div { background-image: radial-gradient(at left bottom, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT CENTER BOTTOM div { background-image: radial-gradient(at center bottom, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: RADIAL-GRADIENT AT RIGHT BOTTOM div { background-image: radial-gradient(at right bottom, #476CFF, #FFEF5C); height: 200px; width: 400px; } Hiển thị trình duyệt: REPEATING-RADIAL-GRADIENT div { background-image: repeating-radial-gradient(#476CFF 40%, #FFEF5C 60%); height: 200px; width: 400px; } Hiển thị trình duyệt: |