CSS 用户界面

• CSS 多列
• CSS 变量

CSS 用户界面

在本章中，您将学到以下 CSS 用户界面属性：

• resize
• outline-offset

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

CSS 调整大小

resize 属性规定元素是否应（以及如何）被用户调整大小。

注意：Internet Explorer 不支持 resize 属性。

下例只允许用户调整 <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 属性在轮廓与元素的边缘边框之间添加空间。

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

下面的例子使用 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 用户界面属性

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

• CSS 多列
• CSS 变量