一篇关于IE6、7、8下如何实现盒阴影的几个注意点

夕阳的金辉把绿色的林海染成金黄一片。火红的太阳慢慢地西落了,归鸟们纷纷从我头上飞过,飞回到它们的小巢。一轮明月从东方静悄悄地升上来。夜空中美丽的星星,似乎在眨着眼睛对我说:夜,来了!
复制代码
代码如下:

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

  但是,IE6、7、8不认识这段样式,所以我们会考虑用滤镜来实现这功能

复制代码
代码如下:

/* 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');


其实如果要求不是那么苛刻的话,IE下用滤镜已经能达到我们要的效果了。当然,


而且,不管你用什么颜色的缩写,都会变成这样,哪怕你写成#fff,最终效果也会是这样。

  第二,滤镜的阴影是计算在宽高内的。比如我的盒子宽高都是100px,当我设置阴影的宽度为4px的时候,实际我盒子的宽度和高度就都变成了104px


目前就发现这2个注意点,如果你还有要补充的,欢迎在下面留言。

本文一篇关于IE6、7、8下如何实现盒阴影的几个注意点到此结束。人的一生是漫长的,但关键的只有几步。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例