Các ví dụ CSS Box Shadow

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;
}

1. Qui định đổ bóng theo chiều ngang (đơn vị px).
2. Qui định đổ bóng theo chiều dọc (đơn vị px).
3. Độ rộng của bóng đổ (đơn vị px).
4. Độ mờ của bóng đổ (đơn vị px).
5. 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!