Cách sử dụng
- Chọn một preset hoặc điều chỉnh độ lệch, độ mờ, độ lan rộng, màu sắc và độ mờ đục của lớp đầu tiên.
- Thêm lớp để tạo chiều sâu tự nhiên hơn hoặc chọn “Inset” để tạo bóng bên trong.
- Thay đổi nền xem trước và màu hộp cho phù hợp với thiết kế, sau đó sao chép CSS.
Cách hoạt động
Mỗi lớp của box-shadow gồm: độ lệch ngang, độ lệch dọc, bán kính làm mờ, độ lan rộng và màu sắc; có thể thêm inset ở phía trước. Độ lệch dương đẩy bóng sang phải và xuống dưới. Làm mờ giúp viền bóng mềm hơn và không thể dùng giá trị âm; độ lan rộng làm bóng lớn hơn (giá trị dương) hoặc nhỏ lại (giá trị âm) trước khi làm mờ. Các lớp được phân tách bằng dấu phẩy và lớp đầu tiên được vẽ lên trên cùng.
Để tạo cảm giác nổi tự nhiên, thường kết hợp một bóng nhỏ, sắc nét với một bóng lớn hơn, mềm hơn và có độ mờ thấp. Đây là cách preset “Nổi” hoạt động. Màu được viết dưới dạng rgba() để thể hiện rõ độ mờ. Bóng đi theo border-radius của phần tử và không chiếm diện tích bố cục, nên không làm dịch chuyển các phần tử khác.
Bóng có giá trị làm mờ rất lớn trên nhiều phần tử có thể khiến thao tác cuộn chậm hơn trên điện thoại cấu hình thấp. Nếu tạo hiệu ứng động cho bóng, thường sẽ mượt hơn khi làm mờ dần một pseudo-element đã có sẵn bóng, thay vì tạo hiệu ứng động trực tiếp cho box-shadow.
Ví dụ
Thẻ trên nền sáng
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); tạo cho thẻ một viền sắc nét cùng hiệu ứng nổi nhẹ nhàng.
Vòng viền tiêu điểm không làm xê dịch bố cục
Một lớp có độ lệch 0, độ mờ 0 và độ lan rộng 3px, dùng màu thương hiệu, sẽ tạo một vòng viền liền nét quanh nút. Khác với đường viền, lớp này không làm thay đổi kích thước phần tử.
Trường nhập liệu khi nhấn
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) tạo cảm giác trường nhập liệu hơi lõm vào trong.
Câu hỏi thường gặp
box-shadow khác filter: drop-shadow() như thế nào?
box-shadow đi theo khung và border-radius của phần tử, đồng thời hỗ trợ độ lan rộng và inset. drop-shadow() đi theo hình dạng hiển thị, kể cả các vùng trong suốt của ảnh PNG hoặc SVG, nhưng không hỗ trợ độ lan rộng hay inset.
Tại sao bóng của tôi bị cắt?
Phần tử cha có overflow: hidden sẽ cắt mọi nội dung vượt ra ngoài khung, kể cả bóng. Hãy thêm padding cho phần tử cha hoặc thay đổi quy tắc overflow.
Nên dùng bao nhiêu lớp?
Với hầu hết giao diện, một hoặc hai lớp là đủ. Thêm lớp có thể giúp bóng mượt hơn nhưng sẽ tốn thêm một chút tài nguyên để vẽ, nhất là với danh sách dài.
Quyền riêng tư
CSS được tạo ngay trong trình duyệt. Không có dữ liệu nào được tải lên hoặc lưu trữ.