自由縮放屬性resize

為了增強用戶體驗，CSS3增加了很多新的屬性，其中resize就是一個重要的屬性，它允許用戶通過拖動的方式來修改元素的尺寸來改變元素的大小。到目前為止，可以使用overflow屬性的任何容器元素。

在此之前，Web設計師為了要實現這樣具有拖動效果的UI，使用大量的腳本代碼才能實現，這樣費時費力，效率極低。

resize屬性主要是用來改變元素尺寸大小的，其主要目的是增強用戶體驗。但使用方法卻是極其的簡單，先從其語法入手。

resize: none | both | horizontal | vertical | inherit

取值說明：

屬性值

取值說明

none

用戶不能拖動元素修改尺寸大小。

both

用戶可以拖動元素，同時修改元素的寬度和高度

horizontal

用戶可以拖動元素，僅可以修改元素的寬度，但不能修改元素的高度。

vertical

用戶可以拖動元素，僅可以修改元素的高度，但不能修改元素的寬度。

inherit

繼承父元素的resize屬性值。

例如：通過resize屬性，讓文本域可以沿水平方向拖大。代碼為：

textarea {

-webkit-resize: horizontal;

-moz-resize: horizontal;｝

CSS3外輪廓屬性

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，外輪廓是屬于一種動態樣式，只有元素獲取到焦點或者被激活時呈現。

outline屬性早在CSS2中就出現了，主要是用來在元素周圍繪制一條輪廓線，可以起到突出元素的作用。但是并未得到各主流瀏覽器的廣泛支持，在CSS3中對outline作了一定的擴展，在以前的基礎上增加新特性。outline屬性的基本語法如下：

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

從語法中可以看出outline和border邊框屬性的使用方法極其類似。outline-color相當于border-color、outline-style相當于border-style，而outline-width相當于border-width，只不過CSS3給outline屬性增加了一個outline-offset屬性，其取值說明如下。

-o-resize: horizontal;

-ms-resize: horizontal;

resize: horizontal;

}