简单掌握CSS3中resize属性的用法

CSS3新增了一个强大的属性——resize，它赋予了用户通过简单拖动来修改元素尺寸的能力。原本，“resize”这个词更常被翻译为“缩放”，但在实际应用中，通过resize属性，元素主要是在宽度和高度上进行拉伸调整，而并不能实现缩小到低于其原始尺寸的效果。

值得注意的是，IE浏览器并不支持这一创新的resize属性。

这个resize属性与overflow属性息息相关，只有当元素的overflow属性值不是visible时，resize功能才能生效。以textarea标签为例，Webkit内核的浏览器默认就启用了resize功能，并且默认值为both，这意味着用户可以自由地调整元素的宽度和高度。在如Google Chrome这样的浏览器中，textarea的右下角会有一个控制缩放的按钮，十分便捷。

通常情况下，textarea是被设定了固定宽度和高度的。如果你不希望用户随意调整其尺寸，可以通过添加css属性resize:none来禁止这一功能。这样就可以去除Webkit内核浏览器的默认显示设置。

你还可以将textarea中的resize属性设置为vertical，这样用户就只能调整高度了，从而更好地保持页面的整体布局和外观。

值得注意的是，由于文本框本身就具有overflow:auto的属性，因此它自带了resize属性。关于resize属性的值，有none、both、horizontal和vertical这几种选择。初始值为none，意味着元素默认是不可拉伸的。这个属性主要适用于块级元素、替换元素以及表单元格。值得一提的是，这个属性是不具备继承性的。

具体来说，none表示用户无法调整元素尺寸；both则允许用户调整元素的宽度和高度；horizontal只允许用户调整元素的宽度。

举个例子，在一个textarea的HTML代码中，我们可以通过style属性来设定resize为none，从而禁止用户调整其尺寸。这样的设定在实际网页开发中非常常见，既能保持页面的美观，又能确保用户体验的流畅。

CSS3的resize属性为网页开发带来了更多的可能性和灵活性，使得我们可以创建更加动态和交互性的网页元素。