CSS3 用戶界面
CSS3的用戶界面模塊為頁(yè)面的UI表現(xiàn)提供了更多效果和選擇方案。
增加了一些新的用戶界面特性來(lái)調(diào)整元素尺寸，框尺寸和外邊框。
resize 屬性
屬性定義及使用說(shuō)明
resize屬性指定一個(gè)元素是否是由用戶調(diào)整大小的。
注意：resize屬性適用于計(jì)算其他元素的溢出值是不是"visible"。
默認(rèn)值： ? ?none ? ?
繼承： ? ? ??no ? ?
版本： ? ? ??CSS3 ? ?
JavaScript 語(yǔ)法： ?object.style.resize="both" ? ?
瀏覽器支持：Firefox 4+, Chrome,和Safari支持resize屬性。
語(yǔ)法
resize: none|both|horizontal|vertical:
none：不允許用戶調(diào)整元素大小。不允許用戶調(diào)整元素大小。
both：用戶可以調(diào)節(jié)元素的寬度和高度。
horizontal：?用戶可以調(diào)節(jié)元素的寬度
vertical：?用戶可以調(diào)節(jié)元素的高度。
<!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。
box-sizing: border-box;
當(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的寬度得到。內(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. 輪廓不占用空間
2. 輪廓可能是非矩形
語(yǔ)法：
outline-offset：<length>?|?inherit
<length>：定義輪廓距離容器的值。
inherit：默認(rèn)繼承。
<!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>
