13 使用CSS3用户界面及透明和旋转属性
在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。本节着重介绍一下resize属性,只有Firefox 4和Safari 3支持此属性,resize是可用于重定义textarea的大小。可能的值:
none: UserAgent没提供尺寸调整机制,用户不能操纵机制调节元素的尺寸。
both: UserAgent提供双向尺寸调整机制,让用户可以调节元素的宽度和高度。
horizontal: UserAgent提供单向水平尺寸调整机制,让用户可以调节元素的宽度。
vertical: UserAgent提供单向垂直尺寸调整机制,让用户可以调节元素的高度。
元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果。现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行。通常我们定义颜色都是用十六进制表示。如:background:#000000,表示背景色为黑色。当然也可以用RGB三原色值表示,如:background:rgb(0,0,0),也表示背景色为黑色。rgba只是在rgb的基础上增加了一个a,这个a表示透明度。而且这个属性不会被子元素继承下去,可以在定义颜色的属性使用,应用代码如下:
除了IE,其他浏览器几乎都支持rgba函数。它有四个参数,前三个为一种颜色的RGB值,第四个为透明度。
旋转属性
在CSS3中,可以使用transform允许我们对元素进行旋转,放缩,倾斜,平移的功能,以旋转为例,代码如下所示:
除了早版本的IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。利用CSS3,还可以完成skew(扭曲)和scale(缩放),以及css transitions(动态变换)等。