此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
resize
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
CSS 属性resize 用于设置元素是否可调整尺寸，以及可调整的方向。
尝试一下
resize: both;resize: horizontal;resize: vertical;resize: none;<section> <div>Try resizing this element.</div></section>#example-element { background: linear-gradient(135deg, #0ff 0%, #0ff 94%, #fff 95%); border: 3px solid #c5c5c5; overflow: auto; width: 250px; height: 250px; font-weight: bold; color: #000; display: flex; align-items: center; justify-content: center; padding: 10px;}resize 不适用于下列元素：
- 内联元素
overflow属性设置为visible的块元素
语法
css
/* 关键词值 */resize: none;resize: both;resize: horizontal;resize: vertical;resize: block;resize: inline;/* 全局值 */resize: inherit;resize: initial;resize: revert;resize: revert-layer;resize: unset;resize 属性可指定为下列关键词值之一。
取值
none元素不提供用户可控的调整其尺寸的方法。
both元素显示可让用户调整其尺寸的机制，可沿水平和竖直方向调整尺寸。
horizontal元素显示可让用户沿水平方向调整其尺寸的机制。
vertical元素显示可让用户沿竖直方向调整其尺寸的机制。
block实验性元素显示可让用户沿块向（水平或竖直方向之一，取决于
writing-mode和direction的值）调整其尺寸的机制。inline实验性元素显示可让用户沿行向（水平或竖直方向之一，取决于
writing-mode和direction的值）调整其尺寸的机制。
形式定义
形式语法
resize =
none|
both|
horizontal|
vertical|
block|
inline
示例
禁用文本区域的尺寸调整
在很多浏览器中，<textarea> 元素默认可调整尺寸。你可以用resize 属性改写此行为。
HTML
html
<textarea>在此处输入一些文本。</textarea>CSS
css
textarea { resize: none; /* 禁用尺寸调整 */}结果
对任意元素使用 resize
你可以用resize 属性使任意元素可调整尺寸。在下列示例中，一个可调整尺寸的<div> 包含了一个可调整尺寸的段落（<p> 元素）。
HTML
html
<div> <p> 此段落可在各个方向上调整尺寸，这是因为在此元素上 CSS `resize` 属性设置为 `both`。 </p></div>CSS
css
.resizable { resize: both; overflow: scroll; border: 1px solid black;}div { height: 300px; width: 300px;}p { height: 200px; width: 200px;}结果
规范
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # resize |