resize

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

resize CSS 属性设置元素是否可调整大小，以及在哪个方向调整大小。

试一试

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

#example-element {
  background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

resize 不适用于以下情况：

内联元素
其 overflow 属性设置为 visible 或 clip 的块级元素

语法

css

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

resize 属性指定为以下列表中的单个关键字值。

值

none: 元素不提供用户可控制的调整大小方法。
both: 元素显示一个允许用户调整其大小的机制，该机制可以水平和垂直调整大小。
horizontal: 元素显示一个允许用户在*水平*方向调整其大小的机制。
vertical: 元素显示一个允许用户在*垂直*方向调整其大小的机制。
block: 元素显示一个允许用户在*块*方向调整其大小的机制（水平或垂直，取决于 writing-mode 和 direction 值）。
inline: 元素显示一个允许用户在*内联*方向调整其大小的机制（水平或垂直，取决于 writing-mode 和 direction 值）。

正式定义

初始值	`none`
应用于	`overflow` 非 `visible` 的元素，以及可选地表示图像或视频的替换元素和 iframe。
继承性	否
计算值	同指定值
动画类型	离散

正式语法

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline

示例

禁用文本区域的可调整大小性

在许多浏览器中，<textarea> 元素默认是可调整大小的。您可以使用 resize 属性覆盖此行为。

HTML

html

<textarea>Type some text here.</textarea>

CSS

css

textarea {
  resize: none; /* Disables resizability */
}

结果

将 resize 与任意元素一起使用

您可以使用 resize 属性使任何元素可调整大小。在下面的示例中，一个可调整大小的 <div> 包含一个可调整大小的段落（<p> 元素）。

HTML

html

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>

CSS

css

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

结果

规范

规范
CSS Basic User Interface Module Level 4 # resize

浏览器兼容性

另见

<textarea>

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者于 2025 年 8 月 9 日最后修改。

在 GitHub 上查看此页面 • 报告此内容的问题