为了增强用户体验,CSS3 中新增了一个非常实用的 resize 属性,该属性允许用户通过拖动的方式来自由缩放元素的尺寸,在此之前要实现类似的效果还需要借助大量的 JavaScript 代码。resize 属性的语法格式如下:

both:用户可调整元素的高度和宽度;

单独设置 resize 属性是无效的,resize 属性需要与 overflow 属性结合使用才有效,并且 overflow 属性的值需要设置为 auto、hidden 或 scroll;

并不是所有的元素都可以设置 resize 属性,比如 img 和 table 属性就没办法使用 resize 属性。

运行上面的代码,然后通过拖动元素的右下角就可以调整元素的大小。