CSS Box Shadow

今天看到一个在IE下面也可以实现CSS Box Shadow的方法，感觉不错在这里给大家分享一下！

先说一下这个方法的关键：

1：有两层DIV。2：最外层一定要有background-color和filter属性。3:内层一定要有position（absolute and relative）和background-color。4：内层外层的宽高要设定好。

Used in casting shadows off block-level elements (like divs).

 

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}
  • The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  • The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  • Color
    Example
     

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

    Internet Explorer Box Shadow

    You need extra elements...

    <div class="shadow1">
                <div class="content">
                    Box-shadowed element
                </div>
    </div>
    .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;
    }