CSS的resize属性用于设置元素是否可由用户手动调整尺寸，其中none和both是两个基础且常用的取值，二者的交互效果存在明显差异，理解这些差异能帮助开发者更精准地实现页面交互需求。
resize属性基础定义
resize属性是CSS3中新增的属性，仅适用于overflow属性取值不为visible的元素，其可选值包括none、both、horizontal、vertical等。该属性的作用是允许用户通过拖拽元素的边角或边缘来调整元素的尺寸，不同取值对应不同的可调整方向。
none取值的交互效果
当resize取值为none时，元素完全不允许用户手动调整尺寸，这是resize属性的默认值。此时用户无法通过鼠标拖拽元素的任何边缘或边角改变元素的大小，元素尺寸完全由CSS样式或内容决定。
以下是none取值的示例代码：
/* 设置div元素不可调整尺寸 */
.resize-none {
width: 200px;
height: 150px;
overflow: auto; /* 必须设置overflow不为visible */
resize: none;
border: 1px solid #ccc;
padding: 10px;
}
对应的HTML结构如下：
<div class="resize-none">
这个元素设置了resize为none，用户无法拖拽调整我的尺寸。
</div>
运行上述代码后，用户尝试拖拽该div的任何位置，都不会出现尺寸调整的提示，元素尺寸始终保持初始设置的200px宽、150px高。
both取值的交互效果
当resize取值为both时，元素允许用户同时调整宽度和高度，用户可以通过拖拽元素的右下角边角，同时改变元素的横向和纵向尺寸，调整方向不受限制。
以下是both取值的示例代码：
/* 设置div元素可同时调整宽高 */
.resize-both {
width: 200px;
height: 150px;
overflow: auto; /* 必须设置overflow不为visible */
resize: both;
border: 1px solid #ccc;
padding: 10px;
}
对应的HTML结构如下：
<div class="resize-both">
这个元素设置了resize为both，你可以拖拽我的右下角同时调整宽度和高度。
</div>
运行上述代码后，将鼠标移动到该div的右下角，光标会变成斜向的拖拽样式，按住鼠标左键拖拽时，元素的宽度和高度会同时跟随鼠标移动变化，松开鼠标后尺寸会固定为调整后的大小。
两者的核心差异对比
为了更清晰地展示none和both的区别，以下是两者的多维度对比：
| 对比维度 | resize: none | resize: both |
|---|---|---|
| 是否允许调整尺寸 | 不允许 | 允许 |
| 可调整方向 | 无 | 宽度和高度同时可调整 |
| 鼠标悬停边角样式 | 无特殊样式 | 斜向拖拽光标 |
| 适用场景 | 固定尺寸的元素，如导航栏、固定卡片 | 需要用户自定义尺寸的区域，如文本编辑区、预览面板 |
注意事项
- 使用resize属性时，必须同时设置元素的
overflow属性不为visible，否则resize属性不会生效，这是很多开发者容易忽略的点。 - resize属性的调整行为仅针对用户手动操作，通过CSS或JavaScript修改元素尺寸不受该属性限制。
- 部分旧版本浏览器可能不支持resize属性，实际开发中如果需要兼容旧浏览器，需要额外做降级处理。
总结
resize属性的none取值会完全禁止用户调整元素尺寸，而both取值允许用户同时调整元素的宽度和高度，二者的核心差异在于是否开放尺寸调整的权限以及可调整的方向。开发者可以根据实际场景选择合适的取值，比如固定布局的元素使用none，需要用户自定义大小的交互区域使用both，从而让页面交互更符合预期。