resize

resize CSS 属性允许你控制一个元素的可调整大小性。

none

元素不能被用户缩放。

both

允许用户在水平和垂直方向上调整元素的大小。

horizontal

允许用户在水平方向上调整元素的大小。

vertical

允许用户在垂直方向上调整元素的大小。

block 实验性

Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.

inline 实验性

Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.

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

CSS

<textarea> 元素在Gecko 2.0 (Firefox 4) 中默认是可以进行缩放的。你可以通过下面的 CSS 代码来重写这种行为：

textarea.example {
  resize: none; /* disables resizability */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph (<p> element):

CSS

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

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

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

HTML

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

Result

• <textarea>