srcmini本文概述
CSS提供了许多用户界面功能, 例如调整元素大小, 轮廓和框大小。
以下是CSS3用户界面的一些常见属性的列表：
| 值 | 描述 |
|---|---|
| appearance | 它有助于用户将元素制作为用户界面元素。 |
| box-sizing | 它有助于用户以清晰的方式将元素固定在区域上。 |
| icon | 用于在区域上提供图标。 |
| resize | 用于调整区域中元素的大小。 |
| outline-offset | 它用于设置轮廓与元素的边缘或边框之间的空间。 |
| nav-down | 在按下键盘上的向下箭头按钮时, 用于向下移动。 |
| nav-left | 按下键盘上的向左箭头按钮时, 可向左移动。 |
| nav-right | 按下键盘上的向右箭头按钮时, 可用于向右移动。 |
| nav-up | 按下键盘上的向上箭头按钮时, 可向上移动。 |
注意：调整大小和轮廓偏移是CSS用户界面的最重要属性。调整大小属性可以具有3个常用值：
- 水平调整
- 垂直调整大小
- 两种（水平和垂直）尺寸都可以调整。
CSS3调整大小属性
CSS3 resize属性指定元素是否应由用户调整大小。
水平调整
让我们举一个例子来调整<div>元素的宽度。 （水平调整大小）
请参阅以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize the width of a div element.</div>
</body>
</html>范例2：
垂直调整大小
让我们举一个例子来调整<div>元素的高度。 （垂直调整大小）
请参阅以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize the height of a div element.</div>
</body>
</html>两种（水平和垂直）尺寸都可以调整
你还可以调整<div>元素的宽度和高度。
请参阅以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize both the height and the width of this div element.</div>
</body>
</html>CSS3轮廓偏移
outline-offset属性用于在元素的轮廓和边框之间添加空间。
请参阅以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 10px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This example specifies an outline 10px outside the border edge.</div>
</body>
</html>支持的浏览器
| 属性 | 铬 | IE浏览器 | 火狐浏览器 | 歌剧 | 苹果浏览器 |
|---|---|---|---|---|---|
| resize | 4.0 | not supported | 5.04.0 -moz- | 15.0 | 4.0 |
| outline-offset | 4.0 | not supported | 5.0 4.0 -moz- | 9.5 | 4.0 |
评论前必须登录！
注册