resize
概述
语法
/* 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
Experimental- Depending on the
writing-mode
anddirection
value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction. inline
Experimental- Depending on the
writing-mode
anddirection
value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
标准语法
例子
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
BCD tables only load in the browser