|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。
破洛洛文章简介：CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。
CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。
1.box-shadow属性的扫瞄器兼容性
先来看一个这个属性的扫瞄器兼容性:
- Opera:不晓得是从哪一个版本入手下手撑持的，我在发这篇文章测试的时分，恰好更新了Opera到最新的10.53版本，已撑持box-shadow属性。
- firefox经由过程公有属性-moz-box-shadow撑持。
- Safari和Chrome经由过程公有属性-webkit-box-shadow撑持。
- 一切IE不撑持(不晓得IE9是不是有所改良)。别急，我们将在文章最初会先容一些针对IE的Hack。
2.box-shadow属性的语法
box-shadow有六个可设值:
img{box-shadow:暗影范例X轴位移Y轴位移暗影巨细暗影扩大暗影色彩}
当不设暗影范例时，默许为投影效果。当设为inset时，为内暗影效果。
X轴和Y轴位移不同等但相似于Photoshop内里的”角度”和”地位。
暗影巨细、扩大、色彩和Photoshop内里的都同理。3.实例剖析
让我们经由过程几个实例来看一个box-shadow的效果，先弄个复杂的html供测试：
<html>
<head>
<styletype="text/css">CSS部分写在这里</style>
</head>
<body>
<imgsrc="test.jpg"/>
</body>
</html>
请注重:为了费事儿，上面的CSS代码中只写了box-shadow，在实践利用中，你应当把-moz-box-shadow和-webkit-shadow也写上。你必要做的很简，复制两个box-shadow,在它们后面分离加上-moz-和-webkit-。
img{
-moz-box-shadow:2px2px10px#06C;
-webkit-box-shadow:2px2px10px#06C;
box-shadow:2px2px10px#06C;
}
破洛洛文章简介：CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。
(1).投影，没有位移，10px的暗影巨细，没有扩大，色彩#06C
img{box-shadow:0010px#06C;}
这里的色彩值是HEX值，我们还可使用RGBA值，RGBA值的优点是，它多了一个Alpha通明值，你能够把持暗影的通明度。
img{box-shadow:0010pxrgba(0,255,0,.5)}
(2).在下面的基本上加上20px的扩大
img{box-shadow:0010px20px#06C;}
(3).内暗影，无位移，10px巨细，没有扩大，色彩#06C
img{box-shadow:inset0010px#06C;}
破洛洛文章简介：CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。
(4).多重暗影效果
box-shadow能够同时利用屡次，我们来个四色的暗影。
img{box-shadow:-10px010pxred,box-shadow:10px010pxblue,box-shadow:0-10px10pxyellow,box-shadow:010px10pxgreen}
(5).利用多个暗影属性的按次成绩
当给统一个元素利用多个暗影属性时，必要注重它的按次，开始写的暗影将显现在最顶层。好比上面这段代码，我们先写一个10px的绿色暗影，再写一个10px巨细但扩大20px的暗影。了局是：绿色暗影层在黄色暗影层之上。
img{box-shadow:0010pxgreen;box-shadow:0010px20pxyellow}
但假如我们把按次调一下，像如许:
img{box-shadow:0010px20pxyellow,box-shadow:0010pxgreen;}
我们将看不到后写的绿色暗影层，由于它先写且半径对照年夜的黄色层掩盖失落了。
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>内里写进上面的代码:
<!--[ifIE]><styletype="text/css">img,#testdiv,.testbox{behavior:url(http://yourdomain.com/js/ie-css3.htc);}</style><![endif]-->
蓝色部分输出要利用box-shadow属性的选择器，绿色部分输出ie-css3.htc的相对路径，或绝对路径，归正要包管能会见失掉。
然后如许就OK了。但仍是有几点必要注重的是：
- 当你利用了这个htc文件后，你的CSS内里，只需写有box-shadow,-moz-box-shadow或-webkit-box-shadow的任何一种，IE就会衬着。
- 当利用了这个htc文件后，你不克不及如许写box-shadow:0010pxred;而应当是box-shadow:0px0px10pxred;不然IE中会生效。
- 不撑持RGBA值中的alpha通明度。
- 不撑持inset内暗影。
- 不撑持暗影扩大。
- 暗影在IE中只会显现为玄色，不论你设置成别的甚么色彩。
以是说，这个剧本了仅仅是让IE撑持了部分的box-shadow值。假如你有别的更好的IEhacks剧本，接待留言分享。
原文：http://paranimage.com/css3-box-shadow-property-tutorial/
</p>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:19:34
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主