CSS3 用戶界面

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

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

• resize

• box-sizing

• outline-offset

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

CSS3 調(diào)整尺寸(Resizing)

CSS3中，resize屬性指定一個(gè)元素是否應(yīng)該由用戶去調(diào)整大小。

CSS代碼如下：

實(shí)例

由用戶指定一個(gè)div元素尺寸大?。?/p>

div
{
    resize:both;
    overflow:auto;
}

嘗試一下 ?

CSS3 方框大小調(diào)整(Box Sizing)

box-sizing 屬性允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。

實(shí)例

規(guī)定兩個(gè)并排的帶邊框方框：

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

嘗試一下 ?

CSS3 外形修飾（outline-offset ）

outline-offset 屬性對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。

輪廓與邊框有兩點(diǎn)不同：

• 輪廓不占用空間

• 輪廓可能是非矩形

The CSS code is as follows:

實(shí)例

規(guī)定邊框邊緣之外 15 像素處的輪廓：

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

嘗試一下 ?

新的用戶界面特性

下表中為CSS3的新用戶界面屬性，您可以點(diǎn)擊對(duì)應(yīng)的屬性，了解到更多的內(nèi)容以及對(duì)應(yīng)屬性的用法等等：