Lộ trình tác vụ / từ đầu vào đến kết quả
Cách dựng một box shadow CSS
- 01
Định vị bóng đổ
1–8 Lớp bóng · X/Y (px): −100…100 · Độ nhòe (px): 0–100 · Độ lan (px): −100…100 · Màu · Độ mờ: 0–1 · inset
- 02
Tinh chỉnh độ nhòe và độ lan
Một đến tám lớp bóng với độ lệch, nhòe, lan, màu, độ đục và inset riêng.
- 03
Đặt màu và độ mờ
Chọn một Màu bóng sáu chữ số — mặc định #0b0d12 là màu gần đen — và đặt Độ mờ bóng từ 0 đến 1 theo bước 0.01. Độ mờ trở thành kênh alpha của màu rgba() trong đầu ra, nên 0.28 render thành rgba(11, 13, 18, 0.28).
- 04
Bật chế độ inset
Bật Bóng inset để đưa bóng vào bên trong hộp, tạo cảm giác bề mặt bị nhấn hoặc lõm xuống — hữu ích cho trường nhập liệu và nút đang bật. Khai báo được tạo sẽ thêm từ khóa inset lên đầu khi công tắc bật.
- 05
So sánh với mẫu
Nhấn Tải mẫu để lấy một kiểu tham chiếu sắc nét: độ lệch 8 px trên cả hai trục với nhòe và lan đều bằng không, màu #0f4cff ở độ mờ 0.35 — một đường viền lệch mép cứng. Đặt lại đưa về bóng mềm mặc định, và bản xem trước trực tiếp render lại theo mọi thay đổi.
- 06
Sao chép hoặc tải xuống CSS
Nhấn Sao chép CSS để chép quy tắc .shadow-card, hoặc Tải xuống .css để lưu thành toolars-box-shadow.css. Việc sao chép bị chặn khi có giá trị nào ngoài dải, nên khai báo bạn dán luôn hợp lệ. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.