IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5

 

 

9  透明属性

元素透明也是我们常用的样式，在CSS2中使用滤镜属性opacity实现透明效果。现在有了CSS3的rgba属性，就不用这么麻烦了，当然这也得要浏览器支持才行。通常我们定义颜色都是用十六进制表示。例如，background:#000000，表示背景色为黑色。当然也可以用RGB三原色值表示，例如，background:rgb(0,0,0)，也表示背景色为黑色。RGBA只是在RGB的基础上增加了一个A，这个A表示透明度。而且这个属性不会被子元素继承下去，可以在定义颜色的属性时使用。应用代码如下：

除了IE，其他浏览器几乎都支持rgba函数。该函数有4个参数，前3个参数为一种颜色的RGB值，第4个参数为透明度。

 

10  旋转属性

在CSS3中，可以使用transform属性对元素进行旋转、放缩、倾斜、平移。以旋转为例，代码如下所示：

除了早期版本的IE，其他浏览器都可以使用rotate函数来实现某个对象的旋转。比如rotate(7.5deg)表示顺时针旋转7.5°（degree）。利用CSS3，还可以完成skew（扭曲）和scale（缩放），以及css transitions（动态变换）等操作。

 

11  服务器端字体属性

设计网页的时候，可能会用到某种特殊的字体。如果用户的机器中没有安装这种字体，那么文字只能以普通字体显示。CSS3可以让用户的浏览器自行下载服务器端字体，这样就能呈现出设计者想要的效果。应用示例代码如下所示：

需要注意的是，字体文件必须与网页文件来自同一个域名，符合浏览器的“同源政策”。另外，由于中文字体文件太大，服务器端字体显然只适用于英文字体。