自定义搜索
上一篇:加拿大失去了安理会非常任理事国席位
下一篇:围脖儿传闻:都江堰民工索薪被杀,警察抢尸,冲突升级,警车被砸(图)(图);
用CSS制作阴影效果(兼容IE、Firefox、Google Chrome)
米娅 2010年10月12日 14:38:38

下面的在Firefox、Google Chrome里运行很好,

-moz-box-shadow: 0 0 30px #CCC;
-webkit-box-shadow: 0 0 30px #CCC;
box-shadow: 0 0 30px #CCC;

-moz-box-shadow: 0 0 30px #CCC; 兼容Firefox 3.6
-webkit-box-shadow: 0 0 30px  兼容Google Chrome 6.0

不知道box-shadow兼容什么浏览器,在IE8、Firefox 3.6、Google Chrome 6.0没什么反应,可能用在其他浏览器上。

1,The horizontal offset of the shadow
如果值为正,阴影在box的右边;如果值为负,阴影在box的左边;

2,The vertical offset of the shadow
如果值为正,阴影在box的上面;如果值为负,阴影在box的下面;

3,The blur radius
如果值为0,阴影会很sharp,值越高,阴影越模糊;

4,Color 颜色
如果加inset,阴影会在里面。

-moz-box-shadow: inset 0 0 30px #CCC;
-webkit-box-shadow: inset 0 0 30px #CCC;
box-shadow: inset 0 0 30px #CCC;

如果设上另外一个值,阴影可以比原形小。

-moz-box-shadow: 0px 20px 10px -10px #888;

上面这些在IE8上不起作用,据说只在支持CSS3的浏览器产生效果。

在IE8上可以使用:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=Ǝ', MakeShadow='true',

ShadowOpacity=Ɔ.20');

或者

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3

我喜欢前者,用两个模块,底下的生成一个边沿很模糊的阴影,放上第二个,这样四面都有阴影,调整上面的位置,可以控制阴影的效果。


2楼 2010年10月12日 15:17:42 米娅
如果使用Firefox或Google Chrome,应该看到这个方框的阴影
第1页 共1页
相关链接
1. How to make a website look like this on google.com?
2. Google企业邮箱管理面板登录网址链接
3. 更改DNS后,无法用网址mail.domainname.com访问Google企业邮箱(已解决)
4. 改过DNS后,Google企业邮箱不能收邮件(已解决)
5. Google API 列表 && Google merchant center
6. 在网站使用Google地图笔记
7. 一个简单的使用Google DataStore的例子
8. 优化Google Adsense:通过区段定位突出重要内容
9. Google如何匹配网页的Google Adsense广告
10. 如何提高网站的Google Adsense广告收入
11. Apple iphone市场份额被Google Android吃掉一口的宿命(图)
12. 网传Google面试题
13. 兼容IE、Firefox、Google Chrome的DIV透明处理
14. Google Analytics如何收费
15. 提高Google AdSense广告点击率
16. Google产品列表,Google是越来越神奇了