CSS3 使用者介面
CSS3的使用者介面模組為頁(yè)面的UI表現(xiàn)提供了更多效果和選擇方案。
增加了一些新的使用者介面特性來(lái)調(diào)整元素尺寸，框架尺寸和外部邊框。
resize 屬性
#屬性定義及使用說(shuō)明
resize屬性指定一個(gè)元素是否是由使用者調(diào)整大小的。
注意：resize屬性適用於計(jì)算其他元素的溢出值是否為"visible"。
預(yù)設(shè)值： ? ?none ? ?
繼承：? ? ??no ? ?
#版本：#? ?##JavaScript 語(yǔ)法： ?object.style.resize="both" ? ?
瀏覽器支援：
Firefox 4 +, Chrome,和Safari支援resize屬性。
語(yǔ)法
#resize: none|both|horizo??ntal|vertical:
both：使用者可以調(diào)整元素的寬度和高度。
horizo??ntal：?使用者可以調(diào)整元素的寬度
vertical：?使用者可以調(diào)整元素的高度。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 600px;
height: 300px;
border: 1px solid #000;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p>請(qǐng)注意觀察方框右下角</p>
<div class="box"></div>
</body>
</html>
box-sizing屬性
box-sizing具有content-box和border-box兩個(gè)值。
box-sizing: content-box;
當(dāng)設(shè)定box-sizing:content-box;時(shí)，瀏覽器對(duì)盒子模型的解釋遵從W3C標(biāo)準(zhǔn)，當(dāng)它定義width和height時(shí)，它的寬度不包括border和padding。
當(dāng)設(shè)定box-sizing:border-box;時(shí)，瀏覽器對(duì)盒模型的解釋與IE6之前的版本相同，當(dāng)它定義width和height時(shí)，border 和padding則是被包含在寬高之內(nèi)的。內(nèi)容的寬和高可以透過(guò)定義width和height減去相應(yīng)方向的padding和border的寬度來(lái)得到。內(nèi) 容的寬和高必須保證不能為負(fù)，必要時(shí)將自動(dòng)增大該元素border box的尺寸以使其內(nèi)容的寬或高最小為0。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
</head>
<body>
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
</body>
</html>
#outline-offset 屬性
outline-offset 屬性對(duì)輪廓進(jìn)行偏移，並在超出邊框邊緣的位置繪製輪廓。
輪廓與邊框有兩點(diǎn)不同：
1. 輪廓不佔(zhàn)用空間
2. 輪廓可能是非矩形
語(yǔ)法：outline-offset：<length>?|?inherit#######
<length>：定義輪廓距離容器的值。
inherit：預(yù)設(shè)繼承。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
margin: 50px auto;
outline: 10px solid rgba(255,255,0,9);
background: black;
outline-offset: 10px;
border:5px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
