CSS3 使用者介面
CSS3的使用者介面模組為頁面的UI表現提供了更多效果和選擇方案。
增加了一些新的使用者介面特性來調整元素尺寸，框架尺寸和外部邊框。
resize 屬性
#屬性定義及使用說明
resize屬性指定一個元素是否是由使用者調整大小的。
注意：resize屬性適用於計算其他元素的溢出值是否為"visible"。
預設值： none
繼承： no
#版本：# ##JavaScript 語法： object.style.resize="both"
瀏覽器支援：
Firefox 4 +, Chrome,和Safari支援resize屬性。
語法
#resize: none|both|horizontal|vertical:
both：使用者可以調整元素的寬度和高度。
horizontal： 使用者可以調整元素的寬度
vertical： 使用者可以調整元素的高度。 <!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>请注意观察方框右下角</p>
<div class="box"></div>
</body>
</html>
box-sizing屬性
box-sizing具有content-box和border-box兩個值。
box-sizing: content-box;
當設定box-sizing:content-box;時，瀏覽器對盒子模型的解釋遵從W3C標準，當它定義width和height時，它的寬度不包括border和padding。
當設定box-sizing:border-box;時，瀏覽器對盒模型的解釋與IE6之前的版本相同，當它定義width和height時，border 和padding則是被包含在寬高之內的。內容的寬和高可以透過定義width和height減去相應方向的padding和border的寬度來得到。內 容的寬和高必須保證不能為負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小為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 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
輪廓與邊框有兩點不同：
1. 輪廓不佔用空間
2. 輪廓可能是非矩形
語法：outline-offset：<length> | inherit#######
<length>：定義輪廓距離容器的值。
inherit：預設繼承。
<!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>
