DevTulz Online

Công cụ tạo CSS Box Shadow

Nền

CSS Box Shadow là gì?

Thuộc tính CSS box-shadow thêm hiệu ứng bóng xung quanh khung của một phần tử. Bóng có thể được lệch, làm mờ, lan rộng, tô màu và đặt làm inset (bóng bên trong). Nhiều bóng phân cách bằng dấu phẩy có thể được xếp chồng để tạo hiệu ứng phong phú. Công cụ này cho phép bạn xây dựng bóng nhiều lớp phức tạp một cách trực quan và sao chép CSS sẵn sàng dán vào clipboard.

Cách sử dụng Công cụ tạo Box Shadow

  1. Điều chỉnh thanh trượt cho Offset X/Y, Blur và Spread để định vị và tạo hình dạng bóng.

  2. Nhấp vào ô màu để chọn màu bóng và sử dụng thanh trượt Opacity cho độ trong suốt.

  3. Bật 'Bóng trong' để tạo ánh sáng bên trong hoặc hiệu ứng nhấn.

  4. Nhấp '+ Thêm lớp' để xếp chồng nhiều bóng lên nhau.

  5. Sao chép CSS đã tạo và dán vào stylesheet của bạn.

Câu hỏi thường gặp

Sự khác biệt giữa box-shadow và bộ lọc drop-shadow là gì? box-shadow thêm bóng quanh hộp đường viền hình chữ nhật của phần tử và hỗ trợ bóng hướng vào trong. Bộ lọc CSS drop-shadow() áp dụng cho hình dạng trực quan của phần tử (bao gồm độ trong suốt), làm cho nó theo những đường viền không hình chữ nhật như PNG có nền trong suốt.

Làm cách nào để tạo hiệu ứng nâng thẻ Material Design? Xếp chồng hai box-shadow: một bóng môi trường mềm (blur lớn, độ mờ thấp, độ trải nhẹ) và bóng chính (blur nhỏ hơn, độ mờ cao hơn, độ lệch hướng). Ví dụ: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Có phải box-shadow ảnh hưởng đến bố cục trang không? Không. box-shadow không ảnh hưởng đến kích thước hoặc vị trí của phần tử trong luồng tài liệu. Không giống như outline, nó không chiếm không gian bố cục và sẽ không đẩy các phần tử khác xung quanh.

Tôi có thể tạo hoạt ảnh cho box-shadow không? Có. box-shadow có thể tạo hoạt ảnh bằng các chuyển tiếp CSS và hoạt ảnh. Để có hiệu suất tốt, hãy ưu tiên chuyển tiếp box-shadow chỉ khi cần thiết — trình duyệt không thể tăng tốc thay đổi box-shadow bằng GPU một cách hiệu quả như transform hoặc opacity.

Keywords: công cụ tạo CSS box shadow, box-shadow CSS, công cụ bóng CSS, CSS drop shadow, bóng trong, bóng nhiều lớp, CSS shadow trực tuyến