Inset CSS Box Shadow - Mã được tạo sẵn
Xây dựng mã bóng hộp CSS một cách trực quan: các thanh trượt để bù, làm mờ, trải rộng, màu sắc với độ mờ, chế độ chèn và tối đa bốn lớp với bản xem trước trực tiếp.
kết quả
Trang này mở trình tạo bóng hộp với hộp kiểm bên trong đã được đánh dấu, do đó bóng được vẽ bên trong phần tử thay vì phía sau nó. Thẻ xem trước hiển thị hiệu ứng chìm cùng một lúc và mọi thanh trượt liên tục cập nhật trực tiếp dòng CSS.
Bóng bên trong là cách CSS giả mạo độ sâu đi vào bên trong: trạng thái nút được nhấn, trường tìm kiếm và ô nhập liệu, máng thanh tiến trình và bảng khắc đều dựa vào chúng. Vì bóng ôm sát mép trong nên độ mờ và trải rộng hoạt động hơi khác so với bóng đổ thông thường — các thanh trượt ở đây cho phép bạn cảm nhận được sự khác biệt đó ngay lập tức.
Khi giao diện chìm đã phù hợp, hãy sao chép dòng bóng hộp vào biểu định kiểu của bạn. Bạn cũng có thể kết hợp lớp bên trong với các lớp bên ngoài thông thường — thêm lớp thứ hai và bỏ chọn lớp bên trong để trộn cả hai trong một khai báo.