top
Loading...
CSS3 用戶界面

CSS3 用戶界面


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
北斗有巢氏 有巢氏北斗