通过滤镜实现两个边的阴影问题完美版^ - ^

最新推荐文章于 2025-12-05 14:49:58 发布

最新推荐文章于 2025-12-05 14:49:58 发布 · 82 阅读

文章标签：

本文介绍如何使用CSS中的box-shadow属性及IE特有的滤镜实现跨浏览器的文字和盒子阴影效果，并提供了具体的代码示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>king</title>
<style type="text/css">

.shadow{
width:120px;
border:1px solid #ccc; /*care 此处,俺当时就没注意，结果ie中的文字全带上的阴影*/
background:#fff;

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

/*以下属性作用于firefox */
-moz-box-shadow :3px 3px 4px #ccc; /*-maz- box-shadow:水平方向位移竖直方向位移模糊半径颜色 */
/*以下属性为ie 支持*/
*filter : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#cccccc"); /*力度，角度，颜色 */

/*以下只能被safari3浏览器支持*/
-webkit-box-shadow :3px 3px 4px #ccc;
/*以下属性只被Opera到最新的10.53版本支持*/
box-shadow :3px 3px 4px #ccc;

}
</style>

</head>
<body>

<div class="shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="kingisking.jpg" />
</div>
</body>
</html>