- HTML中文网
- 联系QQ：18840023
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-23 11:16:35
CSS3 用户界面
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
用户界面属性：
resize
box-sizing
outline-offset
浏览器支持：
| 属性 | 浏览器支持 | ||||
| resize |
IE不支持 |
|
|
|
Opera 不支持 |
| box-sizing |
|
|
需要前缀 -moz- |
|
|
| outline-offset |
IE不支持 |
|
|
|
|
CSS3 Resizing属性
在 CSS3，resize 属性规定是否可由用户调整元素尺寸
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}点击 "运行实例" 按钮查看在线实例
效果图：
CSS3 Box Sizing属性
box-sizing 属性允许以确切的方式定义适应某个区域的具体内容
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1px solid red;
float:left;
}点击 "运行实例" 按钮查看在线实例
效果图：
CSS3 Outline Offset属性
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形
div{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid skyblue;
outline:2px solid red;
outline-offset:15px;
}点击 "运行实例" 按钮查看在线实例
效果图：
新的用户界面特性
| 属性 | 描述 | CSS版本 |
|---|---|---|
| appearance | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |
| box-sizing | 允许你以适应区域而用某种方式定义某些元素 | 3 |
| icon | 为创作者提供了将元素设置为图标等价物的能力。 | 3 |
| nav-down | 指定在何处使用箭头向下导航键时进行导航 | 3 |
| nav-index | 指定一个元素的Tab的顺序 | 3 |
| nav-left | 指定在何处使用左侧的箭头导航键进行导航 | 3 |
| nav-right | 指定在何处使用右侧的箭头导航键进行导航 | 3 |
| nav-up | 指定在何处使用箭头向上导航键时进行导航 | 3 |
| outline-offset | 外轮廓修饰并绘制超出边框的边缘 | 3 |
| resize | 指定一个元素是否是由用户调整大小 | 3 |
推荐手册