CSS 用户界面 详解
CSS 用户界面
CSS 用户界面
在本章中，您将学到以下 CSS 用户界面属性：
resizeoutline-offset
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| resize | 4.0 | 不支持 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
CSS 调整大小
resize 属性规定元素是否应（以及如何）被用户调整大小。
这个 div 元素可由用户调整大小！
调整大小：单击并拖动此 div 元素的右下角。
注意：Internet Explorer 不支持 resize 属性。
下例只允许用户调整 <div> 元素的宽度：
示例代码：
div {
resize: horizontal;
overflow: auto;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>resize 属性</h1>
<div>
<p>只允许用户调整 div 元素的宽度。</p>
<p>如需调整：请点击并拖动 div 元素的右下角。</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下例只允许用户调整 <div> 元素的高度：
示例代码：
div {
resize: vertical;
overflow: auto;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>resize 属性</h1>
<div>
<p>只允许用户调整 div 元素的高度。</p>
<p>如需调整：请点击并拖动 div 元素的右下角。</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下例允许用户能够调整 <div> 元素的高度和宽度：
示例代码：
div {
resize: both;
overflow: auto;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>resize 属性</h1>
<div>
<p>允许用户调整 div 元素的高度和宽度。</p>
<p>如需调整：请点击并拖动 div 元素的右下角。</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在许多浏览器中，<textarea> 默认可调整大小。在这里，我们使用了 resize 属性来禁用这种可缩放性：
示例代码：
textarea {
resize: none;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<h1>resize 属性</h1>
<p>在很多浏览器中，textarea 元素默认是可调整尺寸的。在本例中，我们已用 resize 属性来禁用这种可调整性：</p>
<textarea id="test">Textarea - 不可调整
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 轮廓偏移
outline-offset 属性在轮廓与元素的边缘边框之间添加空间。
注意：轮廓与边框不同！与边框不同，轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。
下面的例子使用 outline-offset 属性添加了边框和轮廓之间的空间：
示例代码：
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>outline-offset 属性</h1>
<div class="ex1">这个 div 有 4 像素的红色实线轮廓，位于边框边缘外 15 像素处。</div>
<br>
<div class="ex2">这个 div 有 5 像素的蓝色虚线轮廓，位于边框边缘外 5 像素处。</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
