CSS3 latest version reference manual
/ CSS3 用戶界面
CSS3 用戶界面
在 CSS3 中, 增加了一些新的用戶界面特性來(lái)調(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)整大小。
這個(gè) div 元素由用戶調(diào)整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
CSS代碼如下:
實(shí)例
<!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> <p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 屬性.</p> <div>調(diào)整屬性指定一個(gè)元素是否由用戶可調(diào)整大小的。.</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3 方框大小調(diào)整(Box Sizing)
box-sizing 屬性允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。
實(shí)例
<!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)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3 外形修飾(outline-offset )
outline-offset 屬性對(duì)輪廓進(jìn)行偏移,并在超出邊框邊緣的位置繪制輪廓。
輪廓與邊框有兩點(diǎn)不同:
輪廓不占用空間
輪廓可能是非矩形
這個(gè) div 在邊框之外 15 像素處有一個(gè)輪廓。
The CSS code is as follows:
實(shí)例
<!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> <p><b>注意:</b> Internet Explorer 不兼容 outline-offset屬性.</p> <div>這個(gè) div有一個(gè)輪廓邊界15 px邊境外的邊緣。</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
新的用戶界面特性
屬性 | 說明 | CSS |
---|---|---|
appearance | 允許您使一個(gè)元素的外觀像一個(gè)標(biāo)準(zhǔn)的用戶界面元素 | 3 |
box-sizing | 允許你以適應(yīng)區(qū)域而用某種方式定義某些元素 | 3 |
icon | 為創(chuàng)作者提供了將元素設(shè)置為圖標(biāo)等價(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 |
resize | 指定一個(gè)元素是否是由用戶調(diào)整大小 | 3 |