CSS3 使用者介面
CSS3 使用者介面
在 CSS3 中, 增加了一些新的使用者介面特性來(lái)調(diào)整元素尺寸，框尺寸和外邊框。
在本章中，您將了解以下的使用者介面屬性：
resize
box-sizing
outline-offset
#CSS3 調(diào)整尺寸(Resize)
#CSS3中，resize屬性指定一個(gè)元素是否應(yīng)該由使用者去調(diào)整大小。
這個(gè) div 元素由使用者調(diào)整大小。 (在Firefox 4+, Chrome, 和Safari中)
CSS程式碼如下：
實(shí)例
由使用者指定一個(gè)div元素尺寸大?。?/p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div>調(diào)整屬性指定一個(gè)元素是否由用戶可調(diào)整大小的。.</div>
</body>
</html>執(zhí)行程式嘗試
#CSS3 方框大小調(diào)整(Box Sizing)
box-sizing 屬性可讓您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。
實(shí)例
#規(guī)定兩個(gè)並排的帶邊框方框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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">這個(gè)div占據(jù)了左邊的一半。.</div>
<div class="box">這個(gè)div占據(jù)了右邊的一半。</div>
</div>
</body>
</html>運(yùn)行程式嘗試
CSS3 外形修飾（outline-offset ）
outline-offset 屬性對(duì)輪廓進(jìn)行偏移，並在超出邊框邊緣的位置繪製輪廓。
輪廓與邊框有兩點(diǎn)不同：
輪廓不佔(zhàn)用空間輪廓可能是非矩形
實(shí)例
#規(guī)定邊框邊緣之外15 像素處的輪廓：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>
<div>這個(gè) div有一個(gè)輪廓邊界15 px邊境外的邊緣。</div>
</body>
</html>執(zhí)行程式嘗試
新的使用者介面特性
| #屬性 | 說(shuō)明 | CSS |
| appearance | 允許您讓一個(gè)元素的外觀像一個(gè)標(biāo)準(zhǔn)的使用者介面元素 | 3 |
| box-sizing | 允許你以適應(yīng)區(qū)域而用某種方式定義某些元素 | 3 |
| #icon | 為創(chuàng)作者提供了將元素設(shè)定為圖示等價(jià)物的能力。 | 3 |
| nav-down | 指定在何處使用箭頭向下導(dǎo)覽鍵時(shí)進(jìn)行導(dǎo)覽 | 3 |
| nav-index | 指定一個(gè)元素的Tab的順序 | #3 |
| nav-left | 指定在何處使用左側(cè)的箭頭導(dǎo)覽鍵進(jìn)行導(dǎo)覽 | 3 |
| #nav-right | 指定在何處使用右側(cè)的箭頭導(dǎo)覽鍵進(jìn)行導(dǎo)覽 | 3 |
| nav-up | 指定在何處使用箭頭向上導(dǎo)覽鍵時(shí)進(jìn)行導(dǎo)覽 | 3 |
| outline-offset | 外部輪廓修飾並繪製超出邊框的邊緣 | ##3
指定一個(gè)元素是否是由使用者調(diào)整大小
