CSS 的 resize 属性是一项实用且灵活的功能，虽常被忽略，却能通过简单的拖拽操作，轻松实现元素尺寸的动态调整，提升交互体验。

The resize CSS property sets whether an element is resizable, and if so, in which directions.

一、基本语法

resize: none | both | horizontal | vertical | block | inline;

常用取值说明

属性值

描述

适应场景

none

默认值。元素不可调整尺寸。

禁用文本域的默认拉伸

both

可同时调整宽度和高度。

对话框、卡片布局

horizontal

仅可调整宽度。

侧边栏、导航栏

vertical

仅可调整高度。

文本输入框、日志显示

注意

  • block 和 inline 是较新的取值，分别代表沿块级方向和行内方向调整，它们的行为会受 writing-mode 和 direction 属性的影响。

二、使用限制

并非所有 HTML 元素都支持 resize。resize 属性仅适用于满足以下条件的元素：

  • 元素的 overflow 属性值不为 visible（可以是 auto、hidden 或 scroll）。

  • 元素不是行内元素（display 属性不能是 inline）。

元素的 overflow 属性值是 visible时，resize不生效的原因：

  • 浏览器需要一个明确的“边界”来渲染拖拽手柄（通常在元素右下角）。如果内容是 visible（默认溢出可见），浏览器认为没有边界限制，因此不会激活调整功能。

不适用的元素

  • 内联元素（如 <span>）：除非将其改为 block 或 inline-block。

  • <img> 图片 和 <table> 表格：原生不支持，通常需要包裹在一个 <div> 容器中，对容器应用 resize。

  • overflow: visible 的块元素。

三、进阶技巧

3.1 限制调整范围

可以结合 min-width、max-width、min-height、max-height 来约束用户的操作，防止元素被拉得太大遮挡页面，或者太小看不见内容。

示例：

div {
  resize: vertical;     /* 仅垂直调整 */
  min-height: 100px;    /* 最小高度 */
  max-height: 300px;    /* 最大高度 */
  min-width: 100px;     /* 最小宽度 */
  max-width: 500px;     /* 最大宽度 */
  overflow: auto;       /* 别忘了这个 textarea元素不写也生效，是因为代理样式表已经设置*/
}

3.2 修改/隐藏拖拽手柄

默认的手柄样式是浏览器自带的（通常是右下角的斜线方块）。你可以使用 WebKit 的伪元素来修改或隐藏它。

示例：隐藏手柄（但仍保留可调整功能）

.resizable-box::-webkit-resizer {
  background: transparent; /* 隐藏手柄 */
}

  • 注：这主要在基于 WebKit 的浏览器（如 Chrome, Edge）中有效。

四、浏览器兼容性

  • Chrome, Firefox, Safari, Edge 等现代浏览器都支持 resize 属性。

  • Internet Explorer 不支持 resize 属性。

建议访问《Can I Use》网站，以及时了解 resize 属性在各类浏览器中的最新兼容性支持情况。

五、最佳实践口诀

欲调宽高设拉伸， overflow莫见visible； none默认禁伸展， both四向任推移。 图片表格皆无效， 须借div外层围。

  • 注：resize 必须配合 overflow使用，否则不生效。

六、补充说明

虽然对于绝大多数块级元素（如 div），resize 确实严格依赖 overflow: visible 以外的值才能生效，但 <textarea> 是一个特例。为什么 <textarea> 不设置 overflow 也能生效？这是因为 <textarea> 作为一个原生的表单控件，浏览器对其应用了默认的用户代理样式表。

浏览器的默认样式 

绝大多数现代浏览器（Chrome, Firefox, Safari 等）为 <textarea> 元素内置了默认的 CSS 样式。根据 W3C 规范和浏览器的 User Agent 样式表，<textarea> 的默认样式通常包含：

textarea {
  overflow: auto; /* 或者是 overflow: scroll */
  resize: both;   /* 部分浏览器默认允许拉伸 */
}

因此，即使你在代码中没有显式写出 overflow，浏览器在渲染时，该元素实际上已经具备了 overflow: auto（或类似值）。

普通 div 与 textarea 的对比

为了让你更直观地理解两者的区别，我整理了下面这张对比表：

特性

普通块级元素(如 <div>)

表单元素（<textarea>）

默认 overflow 值

visible

auto 或 scroll（浏览器默认）

resize 生效条件

必须手动设置 overflow: auto / scroll

无需手动设置（自带默认样式）

默认 resize 值

none

both（在大多数浏览器中）

不生效如何处理？

检查是否遗漏了 overflow 属性

检查是否被 CSS 强制重置为 resize: none

七、总结和建议

7.1 总结

  • 特殊情况：<textarea> 因为浏览器的默认样式（自带 overflow 和 resize），所以不写 CSS 也能直接拉伸。

  • 通用规则：如果你想要让其他元素（如 div, section）拥有和 <textarea> 一样的拉伸效果，必须手动添加 overflow: auto 或 overflow: scroll。

7.2 建议

虽然 <textarea> 默认可拉伸，但在实际项目中，为了保证在所有浏览器下表现一致，建议显式声明你的意图：

代码示例：

/* 确保在所有环境下都按预期工作 */
textarea {
  resize: both; /* 明确开启 */
  overflow: auto; /* 明确设置溢出行为 */
  min-width: 200px;
  max-width: 500px;
}

彩蛋

本文于 Cnb 平台完整呈现了 CSS resize 属性的示例代码，欢迎前往阅读《css-resize-example》以获取详尽内容。