13 使用CSS3用户界面及透明和旋转属性

13 使用CSS3用户界面及透明和旋转属性

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。本节着重介绍一下resize属性，只有Firefox 4和Safari 3支持此属性，resize是可用于重定义textarea的大小。可能的值：
none： UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
both： UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。
horizontal： UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度。
vertical： UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度。

39.png

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

40.png

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

旋转属性
在CSS3中，可以使用transform允许我们对元素进行旋转，放缩，倾斜，平移的功能，以旋转为例，代码如下所示：

41.png

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