按钮实现弹性拉伸需协同transition中的transform与border-radius：基础设固定px圆角（如12px），hover时同步缩放并增大圆角（如16px），配以cubic-bezier弹性缓动；文字防溢出用white-space: nowrap+min-width；伪元素阴影需移transform至其自身并设z-index:-1。
button的border-radius和transform scale怎么协同生效
直接写border-radius: 50%再加transform: scale(1.2)，弧度会“撑开”变形——因为scale作用在渲染后的整个盒模型上，圆角半径也被同比例放大，视觉上边缘发虚、不自然。真正要的是「拉伸时弧度保持柔顺连贯」，不是单纯放大。
- 用
border-radius设基础弧度（比如12px），别用百分比值，避免缩放干扰 -
transform: scale()只负责尺寸变化，弧度不变形的前提是：按钮内容区（padding + content）和边框足够支撑拉伸后的视觉平衡 - 过渡必须同时作用于
transform和border-radius，否则拉伸瞬间弧度突变，显得生硬 - 示例关键帧：
button { border-radius: 12px; transition: transform 0.2s ease, border-radius 0.2s ease; }<br>button:hover { transform: scale(1.15); border-radius: 16px; }
弹性拉伸后文字溢出或换行错位怎么办
scale会让文字也放大，但容器宽度没变，容易触发换行或截断。尤其按钮文字短（如“提交”）、字体偏大时，一拉伸就顶到左右边距，甚至文字被裁掉。
- 给
button加white-space: nowrap，强制单行，配合overflow: hidden和text-overflow: ellipsis兜底 - 更稳妥的做法：用
min-width锚定最小宽度，比如min-width: 100px，让scale拉伸时有余量可撑开 - 避免对
font-size做transition——它和scale叠加会导致文字渲染抖动，浏览器重排压力大 - 如果按钮含图标（
<svg></svg>），记得给图标设flex-shrink: 0，防止拉伸时被压缩变形
transition-timing-function选ease-in-out还是cubic-bezier(0.34, 1.56, 0.64, 1)
默认ease太“匀速”，缺乏弹性感；纯ease-in-out起止还是偏硬。真要模拟物理拉伸回弹，得微调贝塞尔曲线。
-
cubic-bezier(0.34, 1.56, 0.64, 1)是常用弹性缓动，开头快、中间慢、结尾带一点“过冲”再回稳，视觉上最像橡皮筋拉伸 - 但注意：这个曲线在部分老版Safari中兼容性弱，iOS 13以下可能退化为
ease，如需强兼容，改用ease-in-out+ 稍微延长过渡时间（0.24s）更稳妥 - 不要给
transition写多个属性却共用一个timing函数，比如transition: transform 0.2s ease-in-out, border-radius 0.2s cubic-bezier(...)——浏览器会取第一个，后面无效
伪元素::before实现“拉伸阴影”时z-index失效
想用::before画个渐变阴影层，随按钮一起scale，结果发现阴影总被按钮内容盖住，或者scale后位置偏移。
- 必须给按钮设
position: relative，::before设position: absolute，并明确z-index: -1 - scale会触发新层叠上下文，导致
::before的z-index只在按钮内部生效——解决办法：把transform从按钮移到::before上，按钮本身只做border-radius过渡 - 示例结构：
button { position: relative; border-radius: 12px; }<br>button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; background: radial-gradient(circle at 20% 20%, rgba(0,0,0,0.2), transparent 60%); z-index: -1; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }<br>button:hover::before { transform: scale(1.18); }
border-radius和transform两个过渡节奏的咬合点——差0.02秒，就感觉像卡顿；弧度增量稍大，边缘就发飘。多试两轮hover状态下的实时渲染，比看代码更重要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
