resize

有限可用性

此功能不是基线功能，因为它在一些最常用的浏览器中不起作用。

**resize** CSS 属性设置元素是否可调整大小，以及如果可以调整大小，则调整的方向。

试试

resize 不适用于以下内容

内联元素
设置了 overflow 属性为 visible 的块级元素

语法

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
继承	否
计算值	按指定的值
动画类型	discrete

正式语法

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 基本用户界面模块级别 4 # resize

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

<textarea>