Bạn đang xem : gradient xuyên tâm của hình nền

Hàm CSS

radial-gradient ()

❮ Tham chiếu chức năng CSS

Ví dụ

Một gradient xuyên tâm với các điểm dừng màu cách đều nhau:

#grad {
background-image: radial-gradient (đỏ, lục, lam);
}

Hãy tự mình thử »

Các ví dụ khác về “Hãy tự mình thử” bên dưới.

Định nghĩa và Cách sử dụng

Hàm radial-gradient () đặt một gradient xuyên tâm làm nền
hình ảnh.

Một gradient xuyên tâm được xác định bởi tâm của nó.

Để tạo một gradient xuyên tâm, bạn phải xác định ít nhất hai điểm dừng màu.

Ví dụ về Radial Gradient:

Phiên bản:
CSS3

Hỗ trợ trình duyệt

Các con số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng này.

Các số theo sau -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

Hàm số

radial-gradient ()
26.0
10.0 -webkit-
10.0
16,0
3,6-moz-
6.1
5.1 -webkit-
12,1
11,6 -o-

Cú pháp CSS

background-image: radial-gradient (kích thước hình dạng tại vị trí, màu bắt đầu, …, màu cuối cùng);

Giá trị
Sự mô tả

Xác định hình dạng của gradient. Những giá trị khả thi:

  • hình elip (mặc định)
  • vòng kết nối

kích thước
Xác định kích thước của gradient. Những giá trị khả thi:

  • góc xa nhất (mặc định)
  • bên gần nhất
  • góc gần nhất
  • phía xa nhất

Chức vụ
Xác định vị trí của gradient. Mặc định là “trung tâm”

màu bắt đầu, …, màu cuối cùng
Điểm dừng màu là những màu bạn muốn tạo ra các chuyển tiếp mượt mà giữa các màu. Giá trị này bao gồm giá trị màu, theo sau là vị trí dừng tùy chọn (tỷ lệ phần trăm từ 0% đến 100% hoặc độ dài dọc theo trục gradient).

Xem Thêm  Làm thế nào để tạo và truy cập các phần tử mảng trong NumPy? - mảng của mảng không rõ ràng

Các ví dụ khác

Ví dụ

Một gradient xuyên tâm với các điểm dừng màu cách nhau khác nhau:

#grad {
background-image: radial-gradient (đỏ 5%, xanh lục 15%, xanh lam 60%);
}

Hãy tự mình thử »

Ví dụ

Một gradient xuyên tâm có dạng hình tròn:

#grad {
background-image: radial-gradient (vòng tròn, đỏ, vàng, xanh lục);
}

Hãy tự mình thử »

Ví dụ

Một gradient xuyên tâm với các từ khóa có kích thước khác nhau:

# grad1 {
background-image: radial-gradient (cạnh gần nhất ở 60% 55%, xanh lam, xanh lục, vàng, đen);
}

# grad2 {
background-image: radial-gradient (phía xa nhất ở 60% 55%, xanh lam, xanh lục, vàng, đen);
}

Hãy tự mình thử »

Các trang liên quan

Hướng dẫn CSS: CSS Gradients

❮ Tham chiếu chức năng CSS


Xem thêm những thông tin liên quan đến chủ đề hình nền gradient xuyên tâm

Make GRADIENT MESH Wallpapers in Under 2 MINUTES! | Figma Tutorial

  • Tác giả: Grabster
  • Ngày đăng: 2021-04-25
  • Đánh giá: 4 ⭐ ( 8829 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: You may have seen these gradient mesh graphics all over the web recently. Today, I will show you how you can make your own gradient mesh wallpapers in under 2 minutes! You can also follow this tutorial on your phone. Just go to Figma.com, login or sign up, create a new canvas and follow along with the tutorial.

    Links:
    🔗 Get my special edition mesh wallpapers in Reev Pro: https://bit.ly/ReevPro
    🔗 Get the free collection: https://twitter.com/GrabsterTV/status/1386334019567198210

    —-

    Subscribe & Turn on Notifications so you don’t miss anything
    ► https://www.youtube.com/grabstertv%E2%80%8B?sub_confirmation=1

    🌎 Find me elsewhere:
    Twitter: https://twitter.com/grabstertv
    Discord Server: https://discord.gg/QkKACJd

    🎨 Get My Apps:
    ► Reev Pro Icon Pack: https://bit.ly/ReevPro
    ► Gradjent for KLWP: https://bit.ly/GradjentUnlocked
    ► DashCards for KLWP: https://bit.ly/DashCards
    ► Minimus for KLWP: https://bit.ly/MinimusKLWP

    —-

    🎥 Related Videos:

    – Make Liquid/Fluid Wallpapers On ANDROID or iPHONE: https://youtu.be/1sJ7-mSAXIs

    – Make a Phone Frame/Mockup ON YOUR PHONE: https://youtu.be/GKRd6nrAx6A

    – How To Make GAMING Thumbnail ON ANDROID: https://youtu.be/cwz0gcK597k

    —-

    🎵 Tracklist:
    ► Cyberbear – Aware Scare: https://youtu.be/y_Eqc8rc0tQ
    ► Outro Music: J+1 – Give ‘Em Love: https://youtu.be/x23dF1KhYgo

    🔧 Things I personally use (referrals):
    ► Epidemic Sound: https://www.epidemicsound.com/referral/xksjh4
    ► Brave Browser: https://brave.com/gra376

    —-

    Your feedback is extremely valuable to me. If you have any feedback, be sure to share in the comments.

    Thank you for watching ^_^

    – Grabster 🔥

Nền gradient xuyên tâm 3D hoàn toàn nguyên bản

  • Tác giả: vn.pikbest.com
  • Đánh giá: 4 ⭐ ( 9118 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tải xuống tệp Nền gradient xuyên tâm 3D hoàn toàn nguyên bản này miễn phí ngay bây giờ! Pikbest cung cấp hàng triệu mẫu thiết kế đồ họa miễn phí,hình ảnh PNG,vectơ,minh họa và hình nền cho các nhà thiết kế. Tìm kiếm thêm hình ảnh về dốc,San hô màu đỏ,nền sáng tạo tại Pikbest.com!

CSS Gradients

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 3655 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Linear Gradient linear-gradient (gradient tuyến tính) là loại gradient phổ biến nhất mà chúng ta thấy trong thiết kế web là . Nó được gọi là “tuyến tính” vì flow của màu sắc sẽ từ trái sang phải, từ…

Đặt kích thước của gradient xuyên tâm bằng CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 4 ⭐ ( 4170 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

đen gradient xuyên tâm mờ blackground,: Hình minh họa có sẵn 600755882

  • Tác giả: www.shutterstock.com
  • Đánh giá: 3 ⭐ ( 3753 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm kiếm ảnh HD có sẵn về đen gradient xuyên tâm mờ blackground, và hàng triệu vector, hình minh họa cũng như ảnh có sẵn miễn phí bản quyền trong bộ sưu tập của Shutterstock. Mỗi ngày có thêm hàng nghìn ảnh mới với chất lượng cao.

CSS3 tròn và elip Grad Grad [Mẹo CSS3] / Mã hóa

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 4 ⭐ ( 6421 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay chúng ta sẽ tiếp tục thảo luận về các học sinh CSS3. Trong bài trước chúng tôi đã chỉ cho bạn cách tạo Gradient tuyến tính. Lần này chúng tôi sẽ

Cách kiểm soát chiều cao của hình elip trong gradient xuyên tâm

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 4644 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Kiểu CSS cho Bảng - bảng html với css

By ads_php