Tạo bóng CSS
Tạo box-shadow CSS với xem trước thời gian thực.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);Box-shadow trong CSS là gì?
Thuộc tính box-shadow của CSS cho phép thêm bóng đổ vào bất kỳ phần tử HTML nào. Đây là một trong những công cụ được sử dụng nhiều nhất trong thiết kế web để tạo chiều sâu, độ nổi và phân cấp trực quan. Bóng đổ được áp dụng tốt khiến các phần tử như "nổi" trên trang.
Cú pháp bao gồm: dịch chuyển ngang (X), dịch chuyển dọc (Y), bán kính mờ (blur), bán kính mở rộng (spread), màu sắc và tùy chọn "inset" cho bóng bên trong. Bạn có thể kết hợp nhiều bóng bằng cách phân tách bằng dấu phẩy.
Câu hỏi thường gặp
Thuộc tính inset là gì?
Inset chuyển bóng bên ngoài thành bóng bên trong. Hữu ích để tạo hiệu ứng chiều sâu, trường nhập liệu lõm hoặc nút bấm.
Bóng đổ có ảnh hưởng đến hiệu suất không?
Bóng đổ đơn giản có tác động tối thiểu. Tuy nhiên, bóng đổ với blur rất cao trên nhiều phần tử có thể ảnh hưởng hiệu suất trên thiết bị chậm. Hãy sử dụng vừa phải.
Có thể dùng nhiều bóng đổ không?
Có, phân tách bằng dấu phẩy: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). Điều này tạo ra hiệu ứng chân thực và tinh tế hơn.
Muốn tìm hiểu thêm? Đọc hướng dẫn đầy đủ →