IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式

对于设计人员和开发人员来说，CSS一直是web设计过程中重要的一部分。网页外观主要由CSS控制，编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。随着CSS3的出现以及越来越多的浏览器对它的支持，设计师们有了更多的选择。CSS3可以让网页增添了不少的动画元素，让我们的网页变得更加生动有趣，并且易于交互。本章利用CSS3的样式属性来制作出丰富多彩的网页。在本章中，我们为CSS3的样式属性作一个介绍，列出该属性的属性及用法。使用该样式属性制作一些小案例来对网页样式进行设置。让读者可以更加直观清晰地了解到CSS3的样式属性，并能够立即使用它。通过本章的学习，读者就可以利用CSS3为自己的网站锦上添花了。

新增颜色模式

CSS3样式新增了一种颜色模式rgba，比CSS的颜色模式多了一个透明度的设置。RGB对于大家来说一点不陌生，它就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。新增颜色模式的参数说明如表1所示。

表1  CSS3新增颜色模式参数说明

如果庞统说rgba是制作透明色（透明背景色、透明边框色、透明前景色等），大家不由会想起opacity这个东西。它在我们CSS2中制作背景色通常用到，可是要用它来制作边框色或都说前景色的话，无法实现这个功能。这里利用一个实例对rgb和opacty同时使用与rgba使用作对比，代码如下所示：

使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是opacity后代元素会随着一起具有透明性，所以我们opacity中的字随着透明值下降越来越看不清楚，而RGBA不具有这样的问题。如图1所示：

从我们上面的实例中可以看出，RGBA比为元素设置CSS的透明度更好。因为单独的颜色不影响整个元素的透明度，也不会影响到元素其它的属性，比如说边框，字体。同时为某元素设置rgba，也不会影响到其他元素的相关透明度。

图1  opacity与rgba透明度对比