Tạo UUID
Tạo hàng loạt UUID ngẫu nhiên.
Tạo box shadow CSS
Tạo bóng đổ bằng thanh trượt, xếp chồng nhiều lớp và sao chép mã CSS.
Tệp của bạn ở lại trên thiết bị
Cách dùng
- 1Kéo thanh trượt để chỉnh độ lệch, độ nhòe và độ lan.
- 2Chọn màu và độ trong suốt. Đánh dấu Inset để tạo bóng bên trong.
- 3Thêm lớp để tạo bóng mềm và tự nhiên hơn.
- 4Sao chép mã CSS.
Các tùy chọn có tác dụng gì
- Độ lệch
- Khoảng cách ngang và dọc của bóng so với khung. Giá trị âm đi sang trái và lên trên.
- Độ nhòe
- Mức mềm của viền. Bằng không cho viền sắc nét.
- Độ lan
- Làm bóng to ra hoặc nhỏ lại trước khi làm nhòe. Độ lan âm giúp bóng nhòe lớn không tràn ra hai bên.
- Inset
- Vẽ bóng bên trong khung, giống một ô nhập bị ấn lõm xuống.
- Lớp
- Nhiều bóng được vẽ cùng lúc. Hai hoặc ba lớp nhẹ trông tự nhiên hơn một lớp nặng.
Quyền riêng tư
Mọi thứ chạy ngay trong trình duyệt. Không có gì bạn gõ được gửi đến máy chủ.
Câu hỏi thường gặp
Sao nên dùng nhiều hơn một lớp bóng?
Bóng thật thì sắc nét gần vật và mềm ở xa. Một bóng nhỏ gọn cộng với một bóng lớn mềm mô phỏng điều đó, trông tinh tế hơn một lớp nhòe duy nhất.
Box shadow có theo góc bo tròn không?
Có, nó theo border-radius của phần tử. Thanh trượt bán kính cho thấy điều này và được đưa vào mã CSS đã sao chép.
Bóng nhòe lớn có làm chậm trang không?
Vài bóng tĩnh thì không sao. Nhiều bóng nhòe lớn, hoặc tạo hoạt ảnh cho chúng, có thể tốn tài nguyên trên điện thoại yếu. Hãy tạo hoạt ảnh cho độ trong suốt của một phần tử giả thay thế.
Khác gì so với drop-shadow()?
box-shadow theo khung hình chữ nhật. Bộ lọc drop-shadow() theo hình dạng nhìn thấy, kể cả viền trong suốt của PNG và SVG.
Tôi có thể dùng kết quả trong Tailwind hoặc công cụ khác không?
Giá trị sau box-shadow: là CSS thuần. Trong Tailwind, hãy đặt nó vào một giá trị tùy ý, thay khoảng trắng bằng dấu gạch dưới.