CSS3 用戶界面

在 CSS3 中，新的用戶界面特性包括重設(shè)元素尺寸、盒尺寸以及輪廓等。

在本章中，您將學(xué)到以下用戶界面屬性：

• 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 屬性規(guī)定是否可由用戶調(diào)整元素尺寸。

這個 div 元素可由用戶調(diào)整尺寸（在 Firefox 4+、Chrome 以及 Safari 中）。

CSS 代碼如下：

實例

規(guī)定 div 元素可由用戶調(diào)整大�。�

div
{
resize:both;
overflow:auto;
}

親自試一試

CSS3 Box Sizing

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

實例

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

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

親自試一試

CSS3 Outline Offset

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

輪廓與邊框有兩點不同：

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

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

CSS 代碼如下：

實例

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

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

親自試一試

新的用戶界面屬性

下面的表格列出了所有的轉(zhuǎn)換屬性：