对于设计人员和开发人员来说, 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 透明度对比
来源: http://www.bubuko.com/infodetail-3282660.html