纯css实现“向内收缩”效果的最佳方案是：优先用clip-path inset()配合贝塞尔曲线过渡模拟边框内收，兼容性要求高时降级为transform: scale()加overflow: hidden容器裁切，避免直接动画border-width。
用 border + transform: scale() 模拟“向内收缩”效果
纯 CSS 无法真正让 border 自身“变细并内收”，但视觉上最接近的方案是：固定按钮尺寸，用 scale() 缩小整个按钮，同时用 overflow: hidden 容器裁切掉外溢部分，让边框看起来像从外向内“缩进”。关键不是改 border-width（它不支持 transition），而是用缩放制造错觉。
常见错误是直接对 border-width 做 transition——它确实能动，但只会线性变细，没有“向内运动”的纵深感，也不符合“收缩”直觉。
实操建议：
- 给按钮套一层
<div class="shrink-container">，设 <code>overflow: hidden和固定宽高 - 按钮本身设
border、box-sizing: border-box，并用transform-origin: center - hover 时对按钮加
transform: scale(0.92)（数值按需微调），配合transition: transform 0.3s ease - 避免用
scale(0)或过小值，否则按钮内容可能被压扁或消失 -
clip-path: inset(0)表示不裁剪；inset(8px)表示从四边各向内裁 8px，视觉上就像边框被吞掉一圈 - 必须搭配
transition: clip-path 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)—— 使用非标准贝塞尔曲线才能模拟“先快后慢再回弹”的收缩感 - Safari 对
inset()的transition支持不稳定，建议加-webkit-clip-path兜底 - 不要用
clip-path: polygon()手动写四边坐标——维护成本高，且无法 smooth transition - 动画过程只是“变细”，没有位移感，“收缩”语义缺失
- 当
border-width降到 0 后，再 hover 出来会突然闪出整圈边框，节奏断裂 - 若按钮用了
border-radius，border-width缩小时圆角会形变失真，边缘发虚 - 在 Retina 屏上，极细的
border-width: 0.5px渲染不可靠，容易消失或锯齿 - 缩放会触发重绘（repaint），频繁 hover 可能轻微掉帧，建议加
will-change: transform提前提示渲染引擎 - 若按钮含文字，
scale()会让字体也缩小，需额外用transform: scale(1.08)反向放大文字（麻烦且易错） - 真正要兼顾效果、性能和兼容，推荐双方案降级：现代浏览器走
clip-path，老浏览器 fallback 到scale+opacity微调
clip-path 实现真正可控的边框内收路径
如果需要更精准的“边框逐像素向内坍缩”效果（比如只缩边框、不动内容），clip-path 是目前唯一能逼近的纯 CSS 方案。它通过动态裁剪可视区域，让边框仿佛被“吃掉”一样从外往里退。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意点：
为什么不用 border-width 动画？
虽然 border-width 支持 transition，但它有三个硬伤：
兼容性与性能提醒
clip-path 在 Chrome/Firefox/Edge 100+ 稳定，但 iOS Safari 15.4+ 才支持 inset() 的 transition；transform: scale() 方案兼容性更好（IE10+），但要注意：
最易被忽略的是容器尺寸——无论哪种方案，父容器都必须有明确宽高且 overflow: hidden，否则缩放或裁剪会溢出，动画就“漏光”了。
