Trình tạo bóng hộp CSS
Tạo các giá trị bóng hộp một cách trực quan.
Cách tạo bóng hộp
1. Đặt độ lệch X và Y — X dương di chuyển bóng sang phải, Y dương di chuyển bóng xuống.
2. Điều chỉnh độ mờ (độ mềm) và độ lan tỏa (kích thước trước khi mờ).
3. Chọn màu bóng và độ mờ.
4. Chuyển đổi phần chèn nếu bóng sẽ xuất hiện bên trong hộp; sao chép CSS.
Công thức tạo bóng
Nâng cao thẻ mềm
offsetY 8px, làm mờ 24px, trải 0, màu đen với độ mờ 18% — a Thẻ nổi kiểu Material: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Bóng đổ sắc nét
blur 0, trải 0, offsetY 4px — cạnh cứng như nhãn dán nhấc lên một chút khỏi page.
Nút nhấn vào trong
Bật phần chèn với độ mờ nhỏ — mô phỏng một điều khiển được nhấn hoặc lõm vào bên trong phần tử.
Khi nào nên dùng công cụ này
• Khi bạn điều chỉnh độ sâu giao diện người dùng cho thẻ, phương thức và nút.
• Khi bạn tìm hiểu độ mờ khác với độ trải rộng như thế nào.
• Khi bạn ghi lại các mã thông báo thiết kế với các giá trị bóng chính xác.
Đọc bốn số
box-shadow: 0 8px 24px 0 có nghĩa là x=0, y=8px xuống, Blur=24px, spread=0. Bỏ qua mức chênh lệch và mức chênh lệch mặc định của trình duyệt về 0. Độ mờ lớn với độ lệch bằng 0 sẽ tạo ra ánh sáng; độ lệch lớn với độ mờ nhỏ tạo ra ánh sáng định hướng.
Câu hỏi thường gặp
Cú pháp bóng hộp là gì?
box-shadow: offset-x offset-y màu mờ bán kính trải rộng bán kính mờ; Từ khóa chèn tùy chọn tạo bóng bên trong.
Làm mờ so với trải rộng?
Blur làm mềm cạnh bóng. Trải rộng hoặc thu hẹp hình dạng bóng trước khi làm mờ — mức lan truyền dương mở rộng, thu nhỏ âm.
Tôi nên sử dụng đơn vị nào?
Công cụ này xuất ra pixel (px), lựa chọn phổ biến nhất cho bóng giao diện người dùng màn hình.
Inset làm gì?
Inset vẽ bóng bên trong hộp viền phần tử — hữu ích cho các đầu vào chìm hoặc giếng.
Màu bóng có thể bán trong suốt không?
Có. Độ mờ được áp dụng cho màu đã chọn, tạo ra đầu ra rgba để có các cạnh mượt mà trên các nền khác nhau.