◻ Một bộ công cụ,
mọi nhiệm vụ thiết kế

Tạo bóng đổ

Trình tạo bóng hộp tương tác với tính năng xem trước Canvas nhiều lớp, thời gian thực và đầu ra CSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

◻ Tạo bóng đổ

Hướng dẫn về bóng hộp

Bóng hộp thêm chiều sâu cho các thành phần giao diện người dùng bằng cách mô phỏng ánh sáng và độ cao. Bóng được thiết kế tốt sẽ tạo ra hệ thống phân cấp trực quan và làm cho giao diện trở nên xúc giác hơn.

Điều chỉnh độ lệch ngang, độ lệch dọc, độ mờ, độ trải, màu sắc và độ mờ. Bản xem trước Canvas cập nhật theo thời gian thực. Sao chép mã CSS khi hài lòng.

Pro Tips

Frequently Asked Questions

Q: Sự khác biệt giữa mờ và lan rộng là gì?
Sự khác biệt giữa mờ và lan rộng là gì? Blur kiểm soát độ mềm mại của cạnh bóng. Spread kiểm soát mức độ mở rộng của bóng.
Q: Tôi nên sử dụng bao nhiêu lớp bóng?
Tôi nên sử dụng bao nhiêu lớp bóng? Thông thường 1-2 lớp là đủ. Sử dụng bóng bên trong để tạo chiều sâu bên trong.
Q: Tôi nên sử dụng bao nhiêu lớp bóng hộp?
Tôi nên sử dụng bao nhiêu lớp bóng hộp? Các thiết kế chuyên nghiệp thường sử dụng 2-4 lớp để tạo chiều sâu. Bắt đầu với một bóng đổ nhỏ, thêm bóng có độ trải trung bình và tùy ý thêm bóng xung quanh lớn. Công cụ này hỗ trợ các lớp không giới hạn.
Q: Tác động hiệu suất của bóng hộp là gì?
Tác động hiệu suất của bóng hộp là gì? Một vài bóng hộp có tác động không đáng kể. Quá nhiều bóng mờ có thể ảnh hưởng đến hiệu suất cuộn trên các thiết bị cấp thấp. Công cụ hiển thị bản xem trước theo thời gian thực để bạn có thể đánh giá trước khi sao chép.
Q: Tôi có thể tạo bóng bên trong (hình nhỏ) không?
Tôi có thể tạo bóng bên trong (hình nhỏ) không? Phiên bản hiện tại tập trung vào bóng bên ngoài. Đối với bóng bên trong, hãy thêm từ khóa "inset" theo cách thủ công vào đầu giá trị bóng hộp CSS được tạo.