自由縮放屬性resize
為了增強用戶體驗拾稳,CSS3增加了很多新的屬性,其中resize就是一個重要的屬性炸庞,它允許用戶通過拖動的方式來修改元素的尺寸來改變元素的大小呕乎。到目前為止,可以使用overflow屬性的任何容器元素惩猫。
在此之前芝硬,Web設(shè)計師為了要實現(xiàn)這樣具有拖動效果的UI,使用大量的腳本代碼才能實現(xiàn)轧房,這樣費時費力拌阴,效率極低。
resize屬性主要是用來改變元素尺寸大小的奶镶,其主要目的是增強用戶體驗迟赃。但使用方法卻是極其的簡單,先從其語法入手厂镇。
resize: none | both | horizontal | vertical | inherit
取值說明:
屬性值
取值說明
none
用戶不能拖動元素修改尺寸大小纤壁。
both
用戶可以拖動元素,同時修改元素的寬度和高度
horizontal
用戶可以拖動元素捺信,僅可以修改元素的寬度酌媒,但不能修改元素的高度。
vertical
用戶可以拖動元素迄靠,僅可以修改元素的高度秒咨,但不能修改元素的寬度。
inherit
繼承父元素的resize屬性值掌挚。
例如:通過resize屬性拭荤,讓文本域可以沿水平方向拖大。代碼為:
textarea {
-webkit-resize: horizontal;
-moz-resize: horizontal;}
CSS3外輪廓屬性
外輪廓outline在頁面中呈現(xiàn)的效果和邊框border呈現(xiàn)的效果極其相似疫诽,但和元素邊框border完全不同舅世,外輪廓線不占用網(wǎng)頁布局空間,不一定是矩形奇徒,外輪廓是屬于一種動態(tài)樣式雏亚,只有元素獲取到焦點或者被激活時呈現(xiàn)。
outline屬性早在CSS2中就出現(xiàn)了摩钙,主要是用來在元素周圍繪制一條輪廓線罢低,可以起到突出元素的作用。但是并未得到各主流瀏覽器的廣泛支持胖笛,在CSS3中對outline作了一定的擴展网持,在以前的基礎(chǔ)上增加新特性。outline屬性的基本語法如下:
outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
從語法中可以看出outline和border邊框?qū)傩缘氖褂梅椒O其類似长踊。outline-color相當于border-color功舀、outline-style相當于border-style,而outline-width相當于border-width身弊,只不過CSS3給outline屬性增加了一個outline-offset屬性辟汰,其取值說明如下。
-o-resize: horizontal;
-ms-resize: horizontal;
resize: horizontal;
}