IE6滤镜在实战测试中能让父层里面的子元素产生阴影

Posted 2020-06-24 杨杨0708

 

1、写法一：

<div class="cornerbg">
    <p class="title-file">------</p>

......

</div>

.cornerbg{width: 992px;height: 659px;background: #fff;border-radius: 10px;box-shadow: 0px 0px 20px #777;margin: 14px auto;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=0,Color=‘#909090‘,Positive=‘true‘,gradientType= ‘10‘);}

实战项目中让子元素p里面的文本产生了阴影。

 

2、写法二：

<div class="cornerbg">
    <p class="title-file">------</p>

......

</div>

.cornerbg{width: 992px;height: 659px;background: #fff;border-radius: 10px;box-shadow: 0px 0px 20px #777;margin: 14px auto;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);}(推荐)

实战项目中让子元素p里面的文本产生了阴影。

 

3、最佳实践——还是推荐使用PIE.htc插件来实现IE6下的div层阴影和圆角效果

    <style type=‘text/css‘>
        .cornerbg{
            background: #fff;
            width: 992px;
            height: 659px;
            border-radius: 8px;  
            box-shadow: 0px 0px 10px #B2C3D1;
            margin: 14px auto;  
            position: relative;
            top: 14px;
            behavior: url("__STATIC__/yjj/css/PIE.htc");
        }
    </style>

但要注意上面的样式代码写的位置一定要在html文档内，不能写到外面的css文件中用link引用，否则PIE.htc文件引用不到，无效