Một ví dụ cơ bản
.shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; }
- Qui định đổ bóng theo chiều ngang (đơn vị px).
- Qui định đổ bóng theo chiều dọc (đơn vị px).
- Độ rộng của bóng đổ (đơn vị px).
- Độ mờ của bóng đổ (đơn vị px).
- Màu.
Kết quả
Inner Shadow
.shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }
Kết quả
Đổ bóng trong Internet Explorer
Bạn cần thêm thẻ…
<div class="shadow1"> <div class="content"> Box-shadowed element </div> </div>
CSS như sau:
.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; }
Bóng đổ qua một hướng
.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; }
Kết quả
Các hiệu ứng đổ bóng khác
See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu (@haibnu) on CodePen.
Chúc các bạn thành công!