Design Code 設計密碼

瀏覽器支持

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 */
-webkit-box-sizing:border-box; /* Safari */
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;
}
	

新的用戶界面屬性

下面的表格列出了所有的轉換屬性：