网络编程
位置:首页>> 网络编程>> 网页设计>> CSS3属性box-shadow图层阴影效果使用教程(3)

CSS3属性box-shadow图层阴影效果使用教程(3)

作者:帕兰 来源:帕兰映像 发布时间:2010-05-16 14:54:00 

标签:CSS3,box-shadow,教程

4).  多重阴影效果

box-shadow可以同时使用多次,我们来个四色的阴影。

img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}

(5). 使用多个阴影属性的顺序问题

当给同一个元素使用多个阴影属性时,需要注意它的顺序,最先写的阴影将显示在最顶层。比如下面这段代码,我们先写一个10px的绿色阴影,再写一个10px大小但扩展20px的阴影。结果是:绿色阴影层在黄色阴影层之上。

img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}

但如果我们把顺序调一下,像这样:

img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}

我们将看不到后写的绿色阴影层,因为它先写且半径比较大的黄色层覆盖掉了。

4. 让IE也支持box-shadow

IE本身是shadow滤镜可以实现类似效果的,还有一些js和.htc的hack文件可以帮助你在IE中实现这一效果。我也无法一一都去尝试,这里只介绍我用过的一个。

ie-css3.htc 是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是:下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

<!--[if IE]> <style type="text/css"> img, #testdiv, .testbox
{behavior: url(/file/UploadPic/20105/16/ie-css3-65.htc);} </style> <![endif]-->

蓝色部份输入要使用box-shadow属性的选择器,绿色部份输入ie-css3.htc的绝对路径,或相对路径,反正要保证能访问得到。

然后这样就OK了。但还是有几点需要注意的是:

所以说,这个脚本了仅仅是让IE支持了部份的box-shadow值。如果你有其它更好的IE hacks脚本,欢迎留言分享。

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

  • 当你使用了这个htc文件后,你的CSS里面,只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种,IE就会渲染。

  • 当使用了这个htc文件后,你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。

  • 不支持RGBA值中的alpha透明度。

  • 不支持inset内阴影。

  • 不支持阴影扩展。

  • 阴影在IE中只会显示为黑色,不管你设置成其它什么颜色。

0
投稿

猜你喜欢

  • 译序:本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待。前一段时间,我
  • javascript版 俄罗斯方块(Russian box)小游戏,喜欢的朋友可以玩玩。对源代码感兴趣的朋友也可以研究一下。玩法介绍:可以输
  • 这里列出了13种实现图片或网页内容 lightbox 效果的方法,大部分是链接到各种lightbox作者的英文页面,里面都有源代码下载。Th
  • 论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下,基本实现的初级
  • 一、conn.asp<%  '@Language="VBSCRIPT" CO
  • 大概在九九年做游戏网站的时候,就对文章的发布感到麻烦,不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
  • 晚上突然间看到大猫的头像在闪动,速度打开一看,发现他问,以前我写button标签的时候有没有写type属性,老实的我只有诚实地告诉他,我没写
  • 全球数据量的疯狂增长,使得市场对资深数据库管理员的需求也节节攀升。据统计,一直到2016美国IT市场对数据库管理员的需求量增长都将会超过所有
  • 一个动态载入asp树源码。把 node.htc, style.css 保存与 css 目录下. index.asp subtree.asp
  • Ajax 技术改变了大型商业 Web 应用程序的外观,但是许多较小的 Web 站点都不具备足够的资源重新构建完整的用户界面(UI)。Ajax
  • 网络上有很多个性化的404页面,但是404页面不仅仅是个性化展示,404页面本来目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用
  • 导航标签彼此互斥、完全穷尽。导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签,代表的内容通
  • int connectDb() { EXEC SQL BEGIN DECLARE SECTION; char username[20]; c
  • Oblog4.6 ACCESS版转换为UCenterHome1.5的全过程1、        说明:
  • 谈到“登录”,大多数人脑海中会立刻浮现出那个“两小框:一用户名,一密码,外加一按钮”的经典豆腐块, 这样的功能模块在互联网上屡见不鲜, 成为
  • CSS写法:overflow-y:visible本代码适用平台:IE6,IE7演示:<textarea style="wid
  • 内容摘要:最近逛论坛经常看到有朋友问上传文件怎么重命名,怎么以当前日期来重命名上传文件。现在我就介绍一下重命名的方法,希望对大家有所帮助。本
  • CSS代码更清晰高效的一些经验是许多网页制作者与开发者都关心的问题。但是大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,合理的
  • 引言 性能是一个特征。您必须预先设计性能,否则您以后就得重写应用程序。就是说,有哪些好的策略可使 Active Server Pages (
  • 众所周知windows平台漏洞百出,补丁一个接一个,但总是补也补不净。我把我所知道的看asp源码的方法总结了一下,并且用c#写了个应用程序来
手机版 网络编程 asp之家 www.aspxhome.com