在 CSS3 中屋谭，新的用戶(hù)界面特性包括重設(shè)元素尺寸龟糕、盒尺寸以及輪廓等讲岁。
新的用戶(hù)界面屬性
下面的表格列出了所有的轉(zhuǎn)換屬性：
| 值 | 描述 |
|---|---|
| appearance | 允許您將元素設(shè)置為標(biāo)準(zhǔn)用戶(hù)界面元素的外觀 |
| box-sizing | 允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容衬以。 |
| icon | 為創(chuàng)作者提供使用圖標(biāo)化等價(jià)物來(lái)設(shè)置元素樣式的能力校摩。 |
| nav-down | 規(guī)定在使用 arrow-down 導(dǎo)航鍵時(shí)向何處導(dǎo)航衙吩。 |
| nav-index | 設(shè)置元素的 tab 鍵控制次序。 |
| nav-left | 規(guī)定在使用 arrow-left 導(dǎo)航鍵時(shí)向何處導(dǎo)航冯勉。 |
| nav-right | 規(guī)定在使用 arrow-right 導(dǎo)航鍵時(shí)向何處導(dǎo)航尺锚。 |
| nav-up | 規(guī)定在使用 arrow-up 導(dǎo)航鍵時(shí)向何處導(dǎo)航。 |
| outline-offset | 對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓坛悉。 |
| resize | 規(guī)定是否可由用戶(hù)對(duì)元素的尺寸進(jìn)行調(diào)整裸影。 |
appearance 屬性
瀏覽器支持
所有主流瀏覽器都不支持 appearance 屬性。
Firefox 支持替代的 -moz-appearance 屬性卷扮。
Safari 和 Chrome 支持替代的 -webkit-appearance 屬性均践。
定義和用法
appearance 屬性允許您使元素看上去像標(biāo)準(zhǔn)的用戶(hù)界面元素。
語(yǔ)法
appearance: normal|icon|window|button|menu|field;
| 值 | 描述 |
|---|---|
| normal | 將元素呈現(xiàn)為常規(guī)元素鞭铆。 |
| icon | 將元素呈現(xiàn)為圖標(biāo)（小圖片）焦影。 |
| window | 將元素呈現(xiàn)為視口。 |
| button | 將元素呈現(xiàn)為按鈕舶担。 |
| menu | 將元素呈現(xiàn)為一套供用戶(hù)選擇的選項(xiàng)彬呻。 |
| field | 將元素呈現(xiàn)為輸入字段。 |
實(shí)例
使 div 元素看上去像一個(gè)按鈕：
div {
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
box-sizing 屬性
瀏覽器支持
Internet Explorer狱意、Opera 以及 Chrome 支持 box-sizing 屬性拯欧。
Firefox 支持替代的 -moz-box-sizing 屬性。
定義和用法
box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素藏姐。
例如该贾，假如您需要并排放置兩個(gè)帶邊框的框，可通過(guò)將 box-sizing 設(shè)置為"border-box"兜材。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框逞力，并把邊框和內(nèi)邊距放入框中寇荧。
語(yǔ)法
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框户侥。 |
| border-box | 為元素設(shè)定的寬度和高度決定了元素的邊框盒峦嗤。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制刃泌。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度署尤。 |
| inherit | 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。 |
實(shí)例
規(guī)定兩個(gè)并排的帶邊框的框：
div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
icon 屬性
目前沒(méi)有瀏覽器支持 icon 屬性俗扇。
nav-down 屬性
目前只有 Opera 支持 nav-down 屬性铜幽。
nav-index 屬性
目前只有 Opera 支持 nav-index 屬性。
nav-left 屬性
目前只有 Opera 支持 nav-left 屬性狮杨。
nav-right 屬性
目前只有 Opera 支持 nav-right 屬性到忽。
nav-up 屬性
目前只有 Opera 支持 nav-up 屬性。
outline-offset 屬性
瀏覽器支持
所有主流瀏覽器都支持 outline-offset 屬性护蝶，除了 Internet Explorer翩迈。
定義和用法
outline-offset 屬性對(duì)輪廓進(jìn)行偏移，并在邊框邊緣進(jìn)行繪制堤魁。
輪廓在兩方面與邊框不同：
??輪廓不占用空間
??輪廓可能是非矩形
語(yǔ)法
outline-offset: length|inherit;
| 值 | 描述 |
|---|---|
| length | 輪廓與邊框邊緣的距離返十。 |
| inherit | 規(guī)定應(yīng)從父元素繼承 outline-offset 屬性的值吧慢。 |
實(shí)例
規(guī)定邊框邊緣之外 15 像素處的輪廓：
div {
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
resize 屬性
瀏覽器支持
Firefox 4+赏表、Chrome 以及 Safari 不支持 resize。
