CSS resize 属性指定元素如何调整大小。
它控制调整大小机制的外观和功能。
调整大小的机制通常是元素右下角的三角形旋钮。
此属性是 CSS3 属性之一。
它有 4 个值：“none”、“both”、“horizontal”和“vertical”。
还有另外两个值“block”和“inline”是实验技术。
resize 属性不适用于内联元素或者溢出设置为“可见”的块元素。
它只接受溢出属性的“自动”、“滚动”和“隐藏”值。
| 初始值 | none |
|---|---|
| 应用于 | 具有溢出的元素除可见之外，可选择替换代表图像或者视频的元素和IFrame。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.resize =“horizontal”; |
语法
resize: none | both | horizontal | vertical | block | inline | initial | inherit;
具有 "both" 值的 resize 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 1px solid #1c87c9;
background-color: #eee;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize 属性示例</h2>
<div>
<p>
经历过风雨，才懂得阳光的温暖。
</p>
<p>
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</div>
</body>
</html>
在给定的示例中，元素的高度和宽度都是可调整的。
查看另一个示例，其中元素只能垂直调整大小：
具有“垂直”值的 resize 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 2px solid #ccc;
background-color: #eee;
padding: 10px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize 属性示例</h2>
<div>
<p>
经历过风雨，才懂得阳光的温暖。
</p>
<p>
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</div>
</body>
</html>
元素只能水平调整大小的另一个示例：
具有“水平”值的调整大小属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 1px solid #8ebf42;
background-color: #eee;
padding: 10px;
width: 300px;
height: 200px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize 属性示例</h2>
<div>
<p>
经历过风雨，才懂得阳光的温暖。
</p>
<p>
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</div>
</body>
</html>
CSS resize 属性值说明
| 值 | 描述 |
|---|---|
| none | 该元素未调整大小。这是此属性的默认值。 |
| both | 该元件垂直和水平地调整大小。 |
| horizontal | 该元素仅水平调整大小。 |
| vertical | 该元素仅垂直调整大小。 |
| block | 该元件显示用于允许用户在块方向上调整它的机制（根据写入模式和方向值水平或者垂直）。该值是实验技术。 |
| inline | 该元素显示用于允许用户在内联方向上调整它的机制（根据写入模式和方向值水平或者垂直）。此值是实验技术。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:45 来源：oir作者：oir