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;


  
Try resizing this element.




#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 的值）调整其尺寸的机制。

形式定义

初始值none
适用元素elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
是否是继承属性否
计算值as specified
动画类型离散值

形式语法

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

示例

禁用文本区域的尺寸调整

在很多浏览器中，

CSS

css
textarea {
  resize: none; /* 禁用尺寸调整 */
}

结果