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屬性模仿一個效果，當鼠標滑過右側連接時，文本向右滑動。