css阴影

转载 2015年07月07日 16:53:25

标准方法当然就是指使用CSS3的方法了,这个应该不少同行应该知道,参见如下代码:

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}

释义为:横向偏移3像素,纵向偏移3像素,模糊4像素,颜色为纯黑。

对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢?box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
好在IE浏览器有个IE shadow滤镜,是IE浏览器私有的一个东西,可以模拟还凑合的盒阴影效果,使用类似于下面的代码:

.shadow {
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

样式综合

如下代码:

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}


相关文章推荐

23种css3图片阴影效果

  • 2017年07月19日 10:52
  • 42KB
  • 下载

CSS3文字变形3D阴影效果

  • 2017年06月05日 13:29
  • 1KB
  • 下载

[转]使用CSS3阴影制作立体感效果

CSS3非常强大,发挥想象力便可以用它制作出非常绚丽的效果,这里就使用CSS3的两个属性来制作具有立体感的效果。效果图如下: 使用的两个CSS3属性:box-shadow、trans...

使得IE支持CSS3 圆角阴影 渐变

  • 2016年09月23日 09:42
  • 26KB
  • 下载

CSS3阴影 box-shadow的使用和技巧总结

1.text-shadow是给文本添加阴影效果, 2.box-shadow是给元素块添加周边阴影效果。     随着html5和CSS3的普及,这一特殊效果使用越来越普遍。    基本语法是{b...
  • zxy9602
  • zxy9602
  • 2016年05月25日 18:03
  • 764

css阴影代码

  • 2016年09月01日 13:01
  • 310KB
  • 下载

CSS3图片相册立体阴影效果

  • 2014年08月14日 21:05
  • 129KB
  • 下载

css 利用阴影给字体加粗

想要把字体加粗,但是css样式提供的最粗的font-weight:900;也达不到要求时,可以利用css的text-shadow给字体加上多个阴影从而把字体调的更粗一点,当然直接换字体也是可以的。 正...

CSS3阴影效果1

  • 2015年03月26日 12:14
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css阴影
举报原因:
原因补充:

(最多只允许输入30个字)