Đầu vào
Đang chuẩn bị không gian làm việc…
Cách sử dụng
- Đặt độ lệch ngang, dọc, blur và spread.
- Chọn màu và độ mờ; bật Bóng bên trong nếu cần.
- Kiểm tra bản xem trước rồi Sao chép CSS.
Tạo bóng đổ cho khối
Bóng đổ giúp tách thẻ khỏi nền hoặc tạo cảm giác bề mặt lõm. Chỉ cần một vài giá trị để điều chỉnh mà không phải chuẩn bị ảnh.
Bản xem trước giữ bóng hiển thị khi đổi hình học và màu. Bán kính góc giúp so sánh hình dạng mà không thêm khai báo khác vào đầu ra.
Độ lệch, blur và spread
Độ lệch ngang và dọc dịch bóng so với phần tử. Giá trị âm dịch sang trái hoặc lên trên; giá trị dương dịch sang phải hoặc xuống dưới.
Blur làm mềm mép và không được âm. Spread đổi phạm vi bóng: âm thu hẹp, dương mở rộng.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Một bóng ngoài lệch xuống 8px, blur 24px và màu đen độ mờ 15%.
Màu và inset
Bộ chọn màu đặt màu bóng, còn độ mờ điều chỉnh alpha. Bóng ít đậm cho nền trang phía sau hiện rõ hơn.
Inset đưa bóng vào trong khối. Công cụ tạo một bóng; nhiều lớp cần danh sách bóng phân cách bằng dấu phẩy trong stylesheet.
Sử dụng CSS
Sao chép CSS chỉ xuất box-shadow:. Nếu muốn góc tròn giống bản xem trước, hãy đặt border-radius riêng cho phần tử.
Đầu vào văn bản tối đa 1 MiB. Chuyển đổi CSS và HTML chạy trong Worker với giới hạn 30 giây. Công cụ màu dùng sRGB; kiểu dáng được tạo là bản xem trước và cần kiểm thử trong bố cục của bạn.
Câu hỏi thường gặp
Bán kính góc xem trước có nằm trong CSS không?
Không. Nó chỉ ảnh hưởng bản xem trước. Thêm khai báo border-radius riêng nếu cần cùng hình dạng.
Blur khác spread thế nào?
Blur làm mềm mép bóng. Spread mở rộng hoặc thu nhỏ phạm vi trước khi blur được áp dụng.
Spread có thể âm không?
Có. Spread âm thu nhỏ bóng; blur phải bằng không hoặc dương.
Có thể tạo bóng trong không?
Có. Bật Bóng bên trong để khai báo có thêm từ khóa inset.
Có tạo nhiều lớp bóng không?
Không. Công cụ tạo một bóng. Có thể ghép giá trị với các bóng khác bằng dấu phẩy trong stylesheet.