前端必知必会-CSS 用户界面

---

CSS 用户界面

CSS 用户界面属性：

• resize
• outline-offset

CSS 调整大小

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

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

示例

div {
resize: Horizo​​ntal;
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 用户界面属性

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

属性	描述
outline-offset	在元素的轮廓和边缘或边框之间添加空间
resize	指定元素是否可由用户调整大小

---

总结

本文介绍了CSS 用户界面的使用，如有问题欢迎私信和评论