Hướng dẫn radial-gradient css - radial-gradient css

• 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.

radial gradient

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

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ả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Ị

tag {
    background-image: radial-gradient(color1 percent1, color2 percent2);
}

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Ị

radial gradient

Hiển thị trình duyệt:

RADIAL-GRADIENT 3 GIÁ TRỊ

radial gradient

Hiển thị trình duyệt:

RADIAL-GRADIENT 3 GIÁ TRỊ

radial gradient

Hiển thị trình duyệt:

RADIAL-GRADIENT 3 GIÁ TRỊ

radial gradient

Hiển thị trình duyệt:

RADIAL-GRADIENT 3 GIÁ TRỊ

radial gradient

Hiển thị trình duyệt:

RADIAL-GRADIENT 3 GIÁ TRỊ

radial gradient

Hiển thị trình duyệt:

RADIAL-GRADIENT 3 GIÁ TRỊ

radial gradient

Hiển thị trình duyệt:

REPEATING-RADIAL-GRADIENT

radial gradient

Hiển thị trình duyệt: