CSS 用户界面

在本章中，您将了解以下 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

CSS 调整大小

这个resize属性指定用户是否（以及如何）调整元素的大小。

用户可以调整这个 div 元素的大小！

要调整大小：单击并拖动此 div 元素的右下角。

以下示例允许用户仅调整 <div> 元素的宽度：

示例

div {
resize: horizontal;
overflow: auto;
}

亲自试一试 »

以下示例允许用户仅调整 <div> 元素的高度：

示例

div {
resize: vertical;
overflow: auto;
}

亲自试一试 »

以下示例允许用户调整 <div> 元素的高度和宽度：

示例

div {
resize: both;
overflow: auto;
}

亲自试一试 »

在许多浏览器中，<textarea> 默认情况下可以调整大小。在这里，我们使用 resize 属性来禁用可调整大小：

示例

textarea {
resize: none;
}

亲自试一试 »

CSS 轮廓偏移

这个outline-offset属性在轮廓和元素的边缘或边框之间添加空间。

该 div 的轮廓位于边框边缘外 15 像素处。

笔记：轮廓与边框不同！与边框不同，轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。此外，轮廓不是元素尺寸的一部分；它是元素尺寸的一部分。元素的总宽度和高度不受轮廓宽度的影响。

以下示例使用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;
}

亲自试一试 »

CSS 用户界面属性

下表列出了所有用户界面属性：

Property	Description
outline-offset	Adds space between an outline and the edge or border of an element
resize	Specifies whether or not an element is resizable by the user