CSS3 使用者介面
在 CSS3 中, 增加了一些新的使用者介面特性來調整元素尺寸，框架尺寸和外部邊框。
在本章中，您將了解以下的使用者介面屬性：
resize
box-sizing
outline-offset
瀏覽器支援
表格中的數字表示支援該屬性的第一個瀏覽器版本號。
緊接在 -webkit-, -ms- 或 -moz- 前面的數字為支援該前綴屬性的第一個瀏覽器版本號。
CSS3 調整尺寸(Resizing)
CSS3中，resize屬性指定一個元素是否應該由使用者去調整大小。
這個 div 元素由使用者調整大小。 (在Firefox 4+, Chrome, 和Safari中)
CSS程式碼如下：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>##執行實例»點擊"運行實例" 按鈕查看線上實例
CSS3 方框大小調整(Box Sizing)box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。
實例
運行實例»點擊"運行實例" 按鈕查看線上實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>運行實例»點擊"運行實例" 按鈕查看線上實例
CSS3 外形修飾（outline-offset ）outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。 輪廓與邊框有兩點不同：
- 輪廓不佔用空間
- 輪廓可能是非矩形
實例
點擊"運行實例" 按鈕查看線上實例
新的使用者介面特性<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>##運行實例»點擊"運行實例" 按鈕查看線上實例
| 說明 | CSS | |
|---|---|---|
| 允許您讓一個元素的外觀像一個標準的使用者介面元素 | 3 | |
| 讓你以適應區域而用某種方式定義某些元素 | 3 | |
| 為創作者提供了將元素設定為圖標等價物的能力。 | 3 | |
| 指定在何處使用箭頭向下導覽鍵時進行導覽 | 3 | |
| 指定一個元素的Tab的順序 | #3 | |
| 指定在何處使用左側的箭頭導覽鍵進行導覽 | 3 | |
| 指定在何處使用右側的箭頭導覽鍵進行導覽 | 3 | |
| 指定在何處使用箭頭向上導覽鍵時進行導覽 | 3 | |
| 外部輪廓修飾並繪製超出邊框的邊緣 | ##3resize | |
| 3 |
