CSS 中的 resize 可缩放元素

FreeGuideOnline 最新 2026-07-07

📌 灵感笔记

这里可以记录你的想法。试试右下角的手柄，拖拽改变大小。

```

.card {
  width: 300px;
  min-width: 200px;
  max-width: 600px;
  min-height: 200px;
  max-height: 500px;
  
  border: 2px solid #4a90e2;
  background: #f0f7ff;
  padding: 1.2rem;
  border-radius: 8px;
  
  /* 核心设置 */
  resize: both;
  overflow: auto;
}

通过添加 min-width、max-width 等约束，你可以优雅地控制缩放边界，避免元素被拖得过小或过大破坏布局。

控制手柄样式

默认的拖拽手柄是操作系统原生的三角形或条纹，无法直接用 CSS 自定义。但你可以通过 ::-webkit-resizer 伪元素在 WebKit/Blink 内核浏览器中做一些微调，比如改变颜色或添加背景。

.card::-webkit-resizer {
  background-color: #4a90e2;
  border-radius: 0 0 8px 0;
}