CSS3 用戶界面
CSS3 用戶界面
CSS3 用戶界面
在 CSS3 中, 增加了一些新的用戶界面特性來調(diào)整元素尺寸，框尺寸和外邊框。
在本章中，您將了解以下的用戶界面屬性：
resizebox-sizingoutline-offset
CSS3 調(diào)整尺寸(Resizing)
CSS3中，resize屬性指定一個元素是否應該由用戶去調(diào)整大小。
這個 div 元素由用戶調(diào)整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
<!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)整屬性指定一個元素是否由用戶可調(diào)整大小的。.</div>
</body>
</html>CSS3 方框大小調(diào)整(Box Sizing)
box-sizing 屬性允許您以確切的方式定義適應某個區(qū)域的具體內(nèi)容。
<!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">這個div占據(jù)了左邊的一半。.</div>
<div class="box">這個div占據(jù)了右邊的一半。</div>
</div>
</body>
</html>CSS3 外形修飾（outline-offset ）
outline-offset 屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。
輪廓與邊框有兩點不同：
輪廓不占用空間輪廓可能是非矩形
這個 div 在邊框之外 15 像素處有一個輪廓。
The CSS code is as follows:
<!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>這個 div有一個輪廓邊界15 px邊境外的邊緣。</div>
</body>
</html>新的用戶界面特性
屬性 ? ? ? ? ? ? ? ? ? ? ? ? ?說明 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CSS
appearance ? ?允許您使一個元素的外觀像一個標準的用戶界面元素 ? ? ?3 ? ?
box-sizing ? ?允許你以適應區(qū)域而用某種方式定義某些元素 ? ? ? ? ? ? ? ? ? 3 ? ?
icon ? ?為創(chuàng)作者提供了將元素設(shè)置為圖標等價物的能力。 ? ? ? ? ? ? ? ? ? ? ?3 ? ?
nav-down ? ?指定在何處使用箭頭向下導航鍵時進行導航 ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
nav-index ? ?指定一個元素的Tab的順序 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
nav-left ? ?指定在何處使用左側(cè)的箭頭導航鍵進行導航 ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?
nav-right ? ?指定在何處使用右側(cè)的箭頭導航鍵進行導航 ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?
nav-up ? ?指定在何處使用箭頭向上導航鍵時進行導航 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?
outline-offset ? ?外輪廓修飾并繪制超出邊框的邊緣 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
resize ? ?指定一個元素是否是由用戶調(diào)整大小 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
