CSS3 用戶介面

在 CSS3 中, 增加了一些新的用戶介面特性來調整元素尺寸，框尺寸和外邊框。

在本章中，您將瞭解以下的用戶介面屬性：

resize
box-sizing
outline-offset

流覽器支持

表格中的數字表示支持該屬性的第一個流覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。

屬性
resize	4.0	不相容	5.0 4.0 -moz-	4.0	15.0
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.1 -webkit-	9.5
outline-offset	4.0	不相容	5.0 4.0 -moz-	4.0	9.5

CSS3 調整尺寸(Resizing)

CSS3中，resize屬性指定一個元素是否應該由用戶去調整大小。

這個 div 元素由用戶調整大小。 (在 Firefox 4+, Chrome, 和 Safari中)

CSS代碼如下：

實例

由用戶指定一個div元素尺寸大小：

div { resize:both; overflow:auto; }

CSS3 方框大小調整(Box Sizing)

box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。

實例

規定兩個並排的帶邊框方框：

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }

CSS3 外形修飾（outline-offset ）

outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

輪廓與邊框有兩點不同：

輪廓不佔用空間
輪廓可能是非矩形

這個 div 在邊框之外 15 像素處有一個輪廓。

CSS 代碼如下:

實例

規定邊框邊緣之外 15 像素處的輪廓：

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }

新的用戶介面特性

屬性	說明	CSS
appearance	允許您使一個元素的外觀像一個標準的用戶介面元素	3
box-sizing	允許你以適應區域而用某種方式定義某些元素	3
icon	為創作者提供了將元素設置為圖示等價物的能力。	3
nav-down	指定在何處使用箭頭向下導航鍵時進行導航	3
nav-index	指定一個元素的Tab的順序	3
nav-left	指定在何處使用左側的箭頭導航鍵進行導航	3
nav-right	指定在何處使用右側的箭頭導航鍵進行導航	3
nav-up	指定在何處使用箭頭向上導航鍵時進行導航	3
outline-offset	外輪廓修飾並繪製超出邊框的邊緣	3
resize	指定一個元素是否是由用戶調整大小	3

CSS3 用戶介面