CSS3 用户界面
在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
浏览器支持
新的用户界面属性
下面的表格列出了所有的转换属性:
属性 | 描述 | CSS |
---|---|---|
appearance | 允许您将元素设置为标准用户界面元素的外观 | 3 |
box-sizing | 允许您以确切的方式定义适应某个区域的具体内容。 | 3 |
icon | 为创作者提供使用图标化等价物来设置元素样式的能力。 | 3 |
nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 3 |
nav-index | 设置元素的 tab 键控制次序。 | 3 |
nav-left | 规定在使用 arrow-left 导航键时向何处导航。 | 3 |
nav-right | 规定在使用 arrow-right 导航键时向何处导航。 | 3 |
nav-up | 规定在使用 arrow-up 导航键时向何处导航。 | 3 |
outline-offset | 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 | 3 |
resize | 规定是否可由用户对元素的尺寸进行调整。 | 3 |
实验代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.resize{
width:300px;
padding:10px 40px;
border:1px solid #F00;
resize:both;
overflow:auto;
}
.container{
width:30em;
border:2em solid #00F;
}
.box{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:50%;
border:1em solid #F00;
float:left;
}
.outline{
width:150px;
height:70px;
margin:20px;
padding:10px;
border:2px solid #F00;
outline:#000 dashed 2px;
outline-offset:15px;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="resize">
resize 属性规定是否可由用户调整元素尺寸。但不支持ie和opera。
resize:horizontal;横向调整文本框的大小。
resize:both;上下左右的调整。
resize:vertical;上下的调整。
</div>
<br />
<p>box-sizing的效果</p>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
<br />
<div class="outline">
outline-offset的效果。
这个 div 在边框边缘之外 15 像素处有一个轮廓。
</div>
</body>
</html>
效果图: