在本章中,您将了解以下 CSS 用户界面属性:
resize
outline-offset
表中的数字指定完全支持该属性的第一个浏览器版本。
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
resize
属性指定用户是否(以及如何)调整元素的大小。
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
以下示例允许用户仅调整 <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>The resize Property</h1>
<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</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>The resize Property</h1>
<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</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>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
在许多浏览器中,<textarea> 默认情况下可以调整大小。在这里,我们使用 resize 属性来禁用可调整大小:
textarea {
resize: none;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>
<textarea id="test">Textarea - Not resizable</textarea>
<br><br>
<textarea>Textarea - Resizable (default)</textarea>
</body>
</html>
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>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>
</body>
</html>
下表列出了所有用户界面属性:
在轮廓和元素的边缘或边框之间添加空间
指定元素是否可由用户调整大小