语法:

resizenone | both | horizontal | vertical | inherit

相关属性: N/A

取值:

none:
UserAgent没提供尺寸调整机制,用户不能操纵机制调节元素的尺寸。
both:
UserAgent提供双向尺寸调整机制,让用户可以调节元素的宽度和高度。
horizontal:
UserAgent提供单向水平尺寸调整机制,让用户可以调节元素的宽度。
vertical:
UserAgent提供单向垂直尺寸调整机制,让用户可以调节元素的高度。
inherit:
默认继承。

说明:

使元素的区域可缩放,调节元素尺寸大小。适用于任意获得"overflow"条件的容器。

兼容性:

类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (×)Firefox 2.0 (√)Chrome 1.0.x (×)Opera 9.63 (√)Safari 3.1
(×)IE7 (×)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4
(×)IE8

示例:

resize
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Tencent-ISRD" />
<meta name="Copyright" content="Tencent" />
<title>resize</title>
</head>
<body>
<div style="width:300px;height:80px;padding:16px;border:1px solid;resize:both;overflow: auto;">Safari、Chrome允许元素的缩放的,但尚未完全支持,目前只允许双向调整。CSS3允许你将这个属性应用到任意元素,这将使缩放这个功能拥有跨浏览器的支持。</div>
</body>
</html>
 

快速跳转