>>本文部分实例效果浏览页面<< [注意选用文中指定的浏览器]
如果你比较热衷CSS，那么毫无疑问你应该对CSS3满怀憧憬了。
当然，至今为止CSS3还是依然蒙着神秘的面纱，迫不及待想一览其真面目的也不止你一个人，甚至是浏览器厂商都已经开始着手添加和完善很多新特性的支持了，尽管它们还没有真正的成文面世。Opera和Safari在对CSS3新特性的迎合上份属先驱，而新版本的FF也宣称将会跟随这个趋势。
然后，一个很多人关心的问题：“IE呢？它会不会有什么动静？”也许你已经猜到了，IE在这方面仍然是一如既往的落在了后头。现在的网民仍以使用IE者居多，当Firefox、Opera或Safari已经支持纯CSS圆角，而IE却仍然厚着脸皮不加理会保持无视的时候，我想你还是会无奈的在是否使用CSS3上再三斟酌。
必须承认，CSS3成为主流还需要一到两年或更多的时间，但这并不妨碍我们现在就开始了解它。本文只是一个初步的探讨，如果你知道更多关于CSS3的信息，希望不吝分享：
1.CSS圆角
2.渐变边框
3.CSS投影
4.图片遮罩
1.平滑与圆润 —— CSS圆角
Web 2.0最明显的一个特征就是广泛应用的圆角。
一个全新的规则border-radius，可以让我们不用图片或JS就可以构造出Web2.0风格的圆角外观。先来看一下HTML代码：
- <p class="r-box">
- without images From <a href="http://ximicc.com">ximicc.com</a>
- </p>
很简单的一个段落标签，应用了名为r-box的样式：
- .r-box {
- background-color: #666;
- color: #fff;
- line-height: 20px;
- width: 200px;
- padding: 10px;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- }
在IE或Firefox下的预览效果:
而在Safari浏览器下:
样式设定中前五行是很平常的CSS2规则，最后两行才是关键所在，也就是CSS3中的border-radius。个别浏览器已经能通过一些特殊前缀来支持三代样式的特性，-moz-针对Firefox，而-webkit-是针对Safari的。
border-radius的取值意义如下：
border-radius: 左上 右上 右下 左下;/*四个值*/
border-radius: 左上 左下和右上 右下;/*三个值*/
border-radius: 左上和右下 右上和左下;/*两个值*/
border-radius: 四角等值;/*一个值*/
示例中使用的是最后一条，即四个角均为10px圆角。如果你只需要两个圆角，你可以这么做：
- -webkit-border-bottom-left-radius: 10px;
- -webkit-border-top-right-radius: 10px;
- -moz-border-radius-bottomleft: 10px;
- -moz-border-radius-topright: 10px;
PS：截至本文撰写之时，较之Safari，在对border-radius的解析上W3C更偏向于FF，而Opera则没有考虑把这个规则的支持性加入到9.5版本中去。
2.更丰富的变化 —— 渐变边框
在CSS3中边框已经开始支持渐变效果，比如下面的CSS:
- #box {
- border: 8px solid #000;
- -moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
- -moz-border-top-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
- -moz-border-left-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
- -moz-border-right-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
- width:400px;
- }
在FF3中的预览效果如下:
而在其它的浏览器中:
截至本文撰写之时，Safari和Opera都还没有对此规则提供支持。
3.简洁易懂一步到位 —— CSS投影
虽然这算不上是一个新技术，但在CSS3中可以更快捷的实现投影效果。这个规则本来是属于CSS2.1范畴的，Safari浏览器则早在1.0版本中就已经对此提供支持。文本投影效果的定义方法如下：
- <p style="text-shadow: 2px 2px 2px #999;">
- From <a href="http://ximicc.com">ximicc.com</a>
- </p>
前两个数字控制位移，示例中表示阴影在右、下各偏移2px，最后一个数字表示阴影的范围。如果你想让阴影出现在文本的左上方，只要使用负数就可以了。下面是预览效果：
有一些浏览器，比如Opera和Firefox 3.1a，甚至已经支持多重阴影，也就是说你没准可以跟在PS中一样，给文本添加类似火焰的效果。
4.不再只有Photoshop —— 图片遮罩
这个新特性对设计者而言相当的振奋人心，我们可以为图片、视频甚至其它元素加上透明遮罩。目前为止可能只有Safari能解析这条规则，但是Firefox 3.1和 Opera很快也将提供良好的支持。
遮罩的语法和属性跟背景图片差不多，只不过它出现于元素的前方，Mask的属性有六个，其中包括透明度：
mask-color：类似于背景颜色；
mask-image：类似于背景图片；
mask-repeat：类似于背景平铺；
mask-attachment：类似于背景附件；
mask-position：类似于背景定位；
mask-opacity：遮罩图的透明度；
比如下面是一张素材图片和遮罩图片：
定义CSS样式并应用到HTML的图像上：
- <style type="text/css">
- #miya {
- mask-image: url(mask.gif);
- mask-attachment: repeat;
- }
- </style>
- <img src="picture.jpg" id="miya" />
正常的解析效果如下：
如果我们再添加一个透明度属性：
- <style type="text/css">
- #miya {
- mask-image: url(mask.gif);
- mask-attachment: repeat;
- [color=Maroon]mask-opacity: .3;</font>
- }
- </style>
- <img src="picture.jpg" id="miya" />
则是如下效果：
在Safari开发者David Hyatt的博客上，你可以了解更多关于遮罩的实例和效果。
欲知庐山真面目 —— 更多…
事实上本文只是浮光掠影的探究了一下CSS3的新特性，随着浏览器对Web标准越来越完善的支持，相信还会有更多更优秀的样式规范浮出水面，如多重背景图片、HSL颜色模式、盒模型重构等等。如果你对CSS3有更多的了解，不妨也来分享一下使用方法和心得。
喜欢的就爱屋及乌 被雷了就诛连九族
欢迎您访问西米CC博客，本文被浏览了134次。若需要转载西米CC的原创文章，请接受如下的小小要求，所转载日志文章开端或者末尾做如下标识：
本文转载自：西米CC - http://ximicc.com
