Tạo CSS box-shadow
Kéo các thanh trượt và sao chép CSS.
- Chạy ngay trên trình duyệt của bạn — văn bản của bạn không bao giờ được gửi đi đâu cả
- Không cần đăng ký, không có hạn mức, dùng miễn phí bao nhiêu lần tùy thích
Cách hoạt động
Box-shadow nhận bốn con số và một màu theo thứ tự nhất định, và sự khác biệt giữa bóng tạo cảm giác chiều sâu với bóng trông như miếng dán nằm hoàn toàn ở các con số đó. Nhìn nó thay đổi khi kéo nhanh hơn nhiều so với đoán mò.
Bốn con số có ý nghĩa gì
Theo thứ tự: độ lệch ngang, độ lệch dọc, bán kính mờ và độ lan. Độ lệch di chuyển bóng; độ mờ làm mềm mép bóng; độ lan làm bóng to ra hoặc nhỏ đi trước khi làm mờ. Độ lan âm kéo bóng vào trong, nhờ đó bạn có bóng gọn dưới thẻ mà không lan ra hai bên.
Làm cho trông thật
Ánh sáng thường đến từ phía trên, nên độ lệch dọc dương nhỏ và không lệch ngang trông tự nhiên. Bóng lớn, rất trong suốt tạo cảm giác chiều sâu mềm mại; bóng nhỏ, đậm, sắc nét trông như miếng dán cắt rời. Vật thật đổ bóng càng mờ khi càng xa bề mặt, nên độ mờ lớn hơn gợi ý phần tử ở cao hơn.
Bóng inset
Bóng inset được vẽ bên trong phần tử thay vì bên ngoài, đó là cách tạo nút bị nhấn, ô nhập liệu và bảng lõm. Áp dụng cùng bốn con số, chỉ là hướng vào trong.
Nhiều bóng cùng lúc
CSS chấp nhận danh sách phân tách bằng dấu phẩy, và xếp chồng hai bóng, một gọn và đậm, một rộng và mờ, trông đẹp hơn đáng kể so với một bóng. Công cụ này tạo ra một bóng; hãy tự dán hai bóng lại với nhau để có hiệu ứng nhiều lớp.
Tạo CSS box-shadow — câu hỏi thường gặp
Các giá trị theo thứ tự nào?
Độ lệch ngang, độ lệch dọc, độ mờ, độ lan, rồi đến màu.
Độ lan âm có tác dụng gì?
Nó thu nhỏ bóng trước khi làm mờ, giúp bóng gọn dưới phần tử thay vì lan ra hai bên.
Bóng inset là gì?
Bóng được vẽ bên trong phần tử thay vì bên ngoài, dùng cho nút bị nhấn và ô nhập liệu.
Tôi có thể tạo bóng nhiều lớp không?
Không trực tiếp. CSS chấp nhận danh sách phân tách bằng dấu phẩy, nên hãy tạo hai bóng rồi dán chúng lại với nhau.