resize - CSS（层叠样式表） 编辑

概述

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

初始值	none
适用元素	elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

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

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

取值

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.

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

标准语法

none | both | horizontal | vertical | block | inline

例子

Disabling resizability of textareas

CSS

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

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

HTML

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

Result

Using resize with arbitrary elements

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

Specifications

Specification	Status	Comment
CSS Logical Properties and Values Level 1 resize	Editor's Draft	Adds the values block and inline.
CSS Basic User Interface Module Level 3 resize	Recommendation	Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (on <textarea>)	1.0	4.0 (2.0)-moz	未实现	12.1	3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)	4.0	5.0 (5.0)[1]	未实现	15	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support (on <textarea>)	?	?	?	?	?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)	?	?	?	?	?

[1] resize doesn't have any effect on <iframe> (cf. bug 680823)

See also

• <textarea>