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透明度对比