CSS3 用戶界面

CSS3 用戶界面

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

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

• resize

• box-sizing

• outline-offset

---

瀏覽器支持

Firefox、Chrome 以及 Safari 支持 resize 屬性。

Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 屬性。Firefox 須要前綴 -moz-。

全部主流瀏覽器都支持 outline-offset 屬性，除了 Internet Explorer。

---

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 像素處有一個輪廓。

The CSS code is as follows:

規定邊框邊緣以外 15 像素處的輪廓：
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

原文地址：http://www.phplearn.cn/css3/css3-user-interface.html