CSS自學筆記（16）:CSS3 用戶界面

CSS3中，也新增了一些關於用戶界面的屬性，這些屬性能夠重設元素或者盒子的尺寸、輪廓等等。

新增的部分屬性的瀏覽器支持狀況

屬性	瀏覽器支持
resize	IE	Firefox	Chrome	Safari	Opera
box-sizing	IE	Firefox(-moz-)	Chrome	Safari	Opera
outline-offset	IE	Firefox	Chrome	Safari	Opera

注：

• 目前的主流瀏覽器對新增的屬性的支持效果不是很理想，定義這些屬性時要特別注意。

新增的屬性以及描述：

屬性	描述
appearance	改變元素的外觀等
box-sizing	容許某一種方式定義適應某個區域的具體內容。
icon	爲創做者提供使用圖標化等價物來設置元素樣式的能力(目前瀏覽器都不支持)
nav-down	在使用 arrow-down 導航鍵時向何處導航。
nav-index	定義元素的 tab 鍵控制次序。
nav-left	在使用 arrow-left 導航鍵時向何處導航。
nav-right	在使用 arrow-right 導航鍵時向何處導航。
nav-up	在使用 arrow-up 導航鍵時向何處導航。
outline-offset	對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
resize	是否可由用戶對元素的尺寸進行調整。

定義resize屬性後，元素的元素的大小就能夠有用戶進行調整，格式爲：

	resize: none|both|horizontal|vertical;

注：none是用戶沒法調整元素的大小，both是用戶能夠調整元素的高寬，horizontal是用戶能夠調整元素的寬度，vertical是用戶能夠調整元素的高度。

用戶能夠本身調整大小

box-sizing屬性主要是爲了解決在IE6之前版本的瀏覽器對盒子的高寬解析包括border和padding，而其餘瀏覽器解析盒子的高寬時不包括border和padding的問題。

定義box-sizing格式：

	box-sizing: content-box|border-box|inherit;

box-sizing各個屬性值的意義：

值	描述	事例
content-box	標準盒子屬性，元素的寬度=width + border + padding，即padding和border不被包含在定義的width和height以內。	*{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
border-box	怪異盒子屬性，元素的寬度=width，即padding和border被包含在定義的width和height以內。	*{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
inherit	從父元素繼承 box-sizing 屬性的值。

border-box屬性值的效果：

左半部分

右半部分

而一樣的CSS樣式代碼，將box-sizing的屬性定義爲content-box的效果：

左半部分

右半部分

outline-offset是設置或檢索對象外的線條輪廓偏移容器的值，格式爲：

	outline-offset: <length>|inherit;

<length>： 用長度值來定義輪廓偏移，且容許負值 。

inherit：從父元素繼承 outline-offset 屬性的值。

	*{width:220px;padding:10px;outline:1px dashed #333;outline-offset:4px;border:3px solid #333;}