CSS3 resize 属性

resize 属性用于控制元素是否可以被用户调整大小。这个属性只适用于可调整大小的元素，如 <textarea> 和 <input type="file">。

语法

element {
  resize: none | both | horizontal | vertical | initial | inherit;
}

• none：默认值，元素不能被调整大小。
• both：元素可以在水平和垂直方向上被调整大小。
• horizontal：元素只能在水平方向上被调整大小。
• vertical：元素只能在垂直方向上被调整大小。
• initial：设置为默认值。
• inherit：继承父元素的 resize 属性。

示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Element</title>
<style>
  textarea {
    resize: both;
    width: 200px;
    height: 100px;
  }
</style>
</head>
<body>
  <textarea>Try resizing me!</textarea>
</body>
</html>

在上面的示例中，<textarea> 元素可以在水平和垂直方向上被调整大小，用户可以通过拖动边框来改变元素的大小。

注意事项

• resize 属性不是所有浏览器都支持，因此在使用时需要进行兼容性处理。
• 在移动设备上，对于一些元素可能无法被调整大小。
• 谨慎使用 resize 属性，以避免影响用户体验。