浏览器兼容的css阴影效果

我们经常需要实现阴影效果，方法很多，有没有只通过css的方式实现呢？有，只是ie与firefox的效果略有差异，请看下面的例子：

<style type="text/css">

.shadow{

    width:120px;

    height:120px;

    border:1px solid #ccc;

    background:#fff;

    font-size:12px;

    padding:10px;

    -moz-box-shadow:3px 3px 4px #ccc;

    -webkit-box-shadow:3px 3px 4px #ccc;

    box-shadow:3px 3px 4px #ccc;

    *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#cccccc");

}

</style>

<div class="shadow">

    阴影效果<br>

    阴影效果

</div>

IE不支持box-shadow属性，但是可以通过shadow滤镜来实现阴影效果，IE并没有把文字阴影和盒子阴影区分，元素中的文字会继承元素的阴影设置，如果你不定义该元素的background和border，就只会出现文字阴影，如果只定义 background属性就只会出现盒子阴影，文字不会出现阴影；如果只定义了border属性则盒子阴影及文字阴影都呈现。

ie，不定义background与border：

<style type="text/css">

.shadow{

    width:120px;

    height:120px;

    font-size:12px;

    padding:10px;

    *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#cccccc");

}

</style>

<div class="shadow">

    阴影效果<br>

    阴影效果

</div>

 ie，只定义background：

<style type="text/css">

.shadow{

    width:120px;

    height:120px;

    background:#fff;

    font-size:12px;

    padding:10px;

    *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#cccccc");

}

</style>

<div class="shadow">

    阴影效果<br>

    阴影效果

</div>

 ie，只定义border：

<style type="text/css">

.shadow{

    width:120px;

    height:120px;

    border:1px solid #ccc;

    font-size:12px;

    padding:10px;

    *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#cccccc");

}

</style>

<div class="shadow">

    阴影效果<br>

    阴影效果

</div>