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

5 用户界面属性

在CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸及轮廓等。本小节着重介绍一下resize属性，只有Firefox 4和Safari 3浏览器支持此属性。resize属性可用于重定义textarea的大小，可能的值包括如下几种。

Ø　none：UserAgent没有提供尺寸调整机制，用户不能调节元素的尺寸。

Ø　both：UserAgent提供了双向尺寸调整机制，用户可以调节元素的宽度和高度。

Ø　horizontal：UserAgent提供了单向水平尺寸调整机制，用户可以调节元素的宽度。

Ø　vertical：UserAgent提供了单向垂直尺寸调整机制，用户可以调节元素的高度。

示例代码如下所示：

6  动画属性

也许CSS3最令人兴奋的增补，就是在没有JavaScript元素的情况下产生动画。CSS3的动画有3个常用属性：transform﹑transition﹑animation。transform属性虽然看起来可以实现动画的效果，但其本质是静态的，其实就是一个图形的变形工具；而transition属性是一个简单的动画属性，操作起来非常简单；animation属性是一个名副其实的动画属性，是transition属性的扩展，但功能十分强大，可以定义多个关键帧及每个关键帧中元素的属性值来实现复杂的动画效果。下面的示例使用transition属性模仿一个效果，当鼠标滑过右侧链接时，文本向右滑动。