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

最新推荐文章于 2024-06-30 14:18:33 发布

kingisking1

最新推荐文章于 2024-06-30 14:18:33 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： border xhtml safari ie 浏览器 firefox

本文链接：https://blog.csdn.net/kingisking1/article/details/6076956

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!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>

firefox中的效果：

ie中的效果：

果然是相当完美咯，啊哈哈哈……

摘自：

http://www.firefly365.com/code/css/filter/201007032116421220.html 浏览器兼容

http://hegz.javaeye.com/blog/640151 相关图片加阴影的代码

与box-shadow 属性相关

http://paranimage.com/css3-box-shadow-property-tutorial/

kingisking1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过滤镜实现两个边的阴影问题完美版^ - ^

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

扫一扫