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
实验性-
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
实验性-
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.
备注: 如果一个 block 元素的 overflow
属性被设置成了visible
,那么resize
属性对该元素无效。
标准语法
例子
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 |
---|
CSS Basic User Interface Module Level 4 # resize |
Browser compatibility
BCD tables only load in the browser