Được sử dụng để đổ bóng ra khỏi các phần tử cấp khối (như div).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Độ lệch ngang của bóng, dương có nghĩa là bóng sẽ ở bên phải của hộp, bù âm sẽ đặt bóng ở bên trái của hộp.
- Độ lệch dọc của bóng đổ, giá trị âm có nghĩa là bóng hộp sẽ ở phía trên hộp, giá trị dương có nghĩa là bóng đổ sẽ ở dưới hộp.
- Bán kính mờ (tùy chọn), nếu đặt bằng 0 bóng sẽ sắc nét, con số này càng cao thì càng mờ.
- Bán kính trải rộng (tùy chọn), giá trị dương làm tăng kích thước của bóng, giá trị âm giảm kích thước. Mặc định là 0 (bóng có cùng kích thước với mờ).
- Màu sắc
Thí dụ
Bóng bên trong
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Thí dụ
Hộp bóng Internet Explorer
Bạn cần thêm các yếu tố…
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Chỉ một bên
Sử dụng bán kính lan truyền âm, bạn có thể nhận được bóng đè trong hộp và chỉ đẩy nó ra khỏi một cạnh của hộp.
.one-edge-shadow ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )Có liên quan
- CSS3: spread value và box-shadow chỉ ở một mặt
- Tài liệu Mozilla
- Nhiều đường viền với
box-shadow.