box-shadow阴影详细解答 box shadow下阴影

CSS3box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。

1. box-shadow属性的浏览器兼容性

先来看一个这个属性的浏览器兼容性:

2. box-shadow属性的语法

box-shadow有六个可设值:

img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色}

3. 实例解析

让我们通过几个实例来看一个box-shadow的效果,先弄个简单的html供测试:




box-shadow阴影详细解答 box shadow下阴影



请注意:为了省事儿,下面的CSS代码中只写了box-shadow,在实际使用中,你应该把-moz-box-shadow和-webkit-shadow也写上。你需要做的很简,复制两个box-shadow,在它们前面分别加上-moz-和-webkit-。

img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
破洛洛文章简介:CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。

(1). 投影,没有位移,10px的阴影大小,没有扩展,颜色#06C

img{box-shadow:0 0 10px #06C;}

这里的颜色值是HEX值,我们还可以使用RGBA值,RGBA值的好处是,它多了一个Alpha透明值,你可以控制阴影的透明度。

img{box-shadow: 0 0 10px rgba(0, 255, 0,.5)}

(2). 在上面的基础上加上20px的扩展

img{box-shadow:0 0 10px 20px#06C;}

(3). 内阴影,无位移,10px大小,没有扩展,颜色#06C

img{box-shadow:inset 0 0 10px#06C;}

破洛洛文章简介:CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。

(4). 多重阴影效果

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

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

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

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

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

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

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

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

4. 让IE也支持box-shadow

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

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

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

在你的

里面写入下面的代码:

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

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

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

  

爱华网本文地址 » http://www.413yy.cn/a/25101014/206697.html

更多阅读

2011年高考福建卷语文试题详细解答 问题进行了详细的解答

2011年普通高等学校招全国统一考试(福建卷) 语文福鼎太姥山中学(茂华学校) 叶如盛古代诗文阅读(27分)(一)默写常见的名句名篇(6分)(1)匪来贸丝,。(《诗经 氓》)(2),风雨兴焉。(《荀子劝学》)(3)山气日夕佳,。(陶渊明《饮酒 结庐在人境》)(4)云销雨霁,。

古剑奇谭详细全攻略~下 _蓦然 古剑奇谭1详细攻略

大地图开放后可以做的事情江都博闻广记:花满楼的明月(棋品),路边摊的刘神炒(聚香团和蟹壳黄,桂花藕粥),服装店老板(缂丝),香烛滩的安彩凤(峨嵋白蜡),当歌酒肆巧伊.露(奇鸟余.尚付),艾利丝(吐火罗国)支线任务:黑曜2(大地图开启后直到青龙镇坐船出海这段时

PayPal提现转帐到银行的详细流程图 paypal如何提现

PayPal如何转帐到我对应的银行卡上面呢?这里给大家把详细的流程介绍下。1、登录您的PayPal账户,点击“提现”子选项卡,选择“将资金通过电汇发送到您的中国银行账户”2、在“国家和地区”的下拉菜单中选择“中国——电汇”

声明:《box-shadow阴影详细解答 box shadow下阴影》为网友我是傲娇故人分享!如侵犯到您的合法权益请联系我们删除