resize

版本： CSS3

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

示例

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

/* global values */
resize: inherit;
resize: initial;
resize: unset;

浏览器支持

IE浏览器不支持 resize ，其余浏览器都支持 resize

语法:

resize ：none | both | horizontal | vertical

取值

• none ：元素不能被用户缩放。
• both ：允许用户在水平和垂直方向上调整元素的大小。
• horizontal ：允许用户在水平方向上调整元素的大小。
• vertical ：允许用户在垂直方向上调整元素的大小。

Note: 如果一个block元素的 overflow 属性被设置成了 visible ，那么 resize 属性对该元素无效。

例子

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

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

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

可以使用resize属性使任何元素都可以调整大小。

//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>