清華大佬耗費(fèi)三個月吐血整理的幾百G的資源，免費(fèi)分享！....>>>
CSS3 用戶界面
CSS3 用戶界面
在 CSS3 中, 增加了一些新的用戶界面特性來調(diào)整元素尺寸，框尺寸和外邊框。
在本章中，您將了解以下的用戶界面屬性：
- resize
- box-sizing
- outline-offset
瀏覽器支持
| 屬性 | 瀏覽器支持 | ||||
|---|---|---|---|---|---|
| resize | |||||
| box-sizing | |||||
| outline-offset | |||||
Firefox、Chrome 以及 Safari 支持 resize 屬性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 屬性。Firefox 需要前綴 -moz-。
所有主流瀏覽器都支持 outline-offset 屬性，除了 Internet Explorer。
CSS3 調(diào)整尺寸(Resizing)
CSS3中，resize屬性指定一個元素是否應(yīng)該由用戶去調(diào)整大小。
這個 div 元素由用戶調(diào)整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
CSS代碼如下：
實(shí)例
由用戶指定一個div元素尺寸大?。?/p>
div
{
resize:both;
overflow:auto;
}
{
resize:both;
overflow:auto;
}
CSS3 方框大小調(diào)整(Box Sizing)
box-sizing 屬性允許您以確切的方式定義適應(yīng)某個區(qū)域的具體內(nèi)容。
實(shí)例
規(guī)定兩個并排的帶邊框方框：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
CSS3 外形修飾（outline-offset ）
outline-offset 屬性對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。
輪廓與邊框有兩點(diǎn)不同：
- 輪廓不占用空間
- 輪廓可能是非矩形
這個 div 在邊框之外 15 像素處有一個輪廓。
The CSS code is as follows:
實(shí)例
規(guī)定邊框邊緣之外 15 像素處的輪廓：
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
新的用戶界面特性
| 屬性 | 說明 | CSS |
|---|---|---|
| appearance | 允許您使一個元素的外觀像一個標(biāo)準(zhǔn)的用戶界面元素 | 3 |
| box-sizing | 允許你以適應(yīng)區(qū)域而用某種方式定義某些元素 | 3 |
| icon | Provides the author the ability to style an element with an iconic equivalent | 3 |
| nav-down | 指定在何處使用箭頭向下導(dǎo)航鍵時進(jìn)行導(dǎo)航 | 3 |
| nav-index | 指定一個元素的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)航鍵時進(jìn)行導(dǎo)航 | 3 |
| outline-offset | 外輪廓修飾并繪制超出邊框的邊緣 | 3 |
| resize | 指定一個元素是否是由用戶調(diào)整大小 | 3 |
掃碼二維碼 獲取免費(fèi)視頻學(xué)習(xí)資料
- 本文固定鏈接: http://www.wangchenghua.com/j/css3/1000985/
- 免費(fèi)： Python視頻資料獲取