button上text-indent无效是因为其为替换元素，规范不支持该属性；应使用padding-left控制文字缩进，配合border-radius实现圆角按钮，注意热区裁剪需clip-path。
移动端按钮的圆角和“缩进”不是一回事，直接设 border-radius 就能出圆角，但所谓“文字缩进”必须用 padding-left，text-indent 在 <button></button> 上完全无效。
为什么 button 上 text-indent 不起作用
按钮是替换元素（replaced element），默认为 inline-block，CSS 规范明确不支持 text-indent。你加了 style="text-indent: 1em"，浏览器直接忽略——不是写错了，是它根本不处理这个属性。
常见错误现象包括：
- 文字纹丝不动，控制台也无报错
- 强行加
display: block后缩进了，但按钮宽度撑满父容器，破坏布局 - 用百分比单位（如
text-indent: 5%），结果缩进随容器变宽，完全失控
真正要让文字“往右挪一点”，唯一可靠方式是：padding-left。它推动整个内容区左移，兼容所有移动端浏览器，且能用 em 或 rem 随字体缩放。
移动端圆角按钮的 padding 与 border-radius 协同要点
圆角只管视觉裁剪，不影响点击热区；而 padding 才决定文字离边框的距离。两者必须配合，否则容易出现文字贴边、图标错位或热区过小等问题。
实操建议：
- 统一用
padding: 10px 16px（或0.625rem 1rem）控制内边距，避免单侧写死像素值 - 圆角值建议与
padding协调：比如padding: 12px 24px对应border-radius: 8px，视觉更均衡 - 若按钮含图标（如
<i class="icon"></i>），优先用padding-left: 32px留出图标空间，再靠text-align: left对齐文字 - 触控安全区要求 ≥44×44px，可用
min-height: 44px+padding保证，再加overflow: hidden防止圆角溢出
移动端真机容易漏掉的三个细节
这些在桌面 Chrome DevTools 里几乎看不出来，但一上 iOS Safari 或安卓 WebView 就暴露：
-
letter-spacing在高DPI屏上渲染差异大：推荐用0.02em而非固定像素，且必须真机验证 - 某些安卓 WebView 对
border-radius+ 渐变背景组合有抗锯齿断裂，可加-webkit-mask-image: linear-gradient(transparent, transparent)强制重绘（慎用） -
outline焦点环默认不贴合圆角，移动端尤其明显；应改用box-shadow: 0 0 0 2px rgba(0,123,255,0.25)模拟，或至少加outline-offset: -2px
最麻烦的是：你调好了圆角、padding、间距，但用户用手指点在“视觉圆角外的尖角区域”依然能触发点击——因为热区没被裁剪。这不是 bug，是标准行为。需要裁热区，得上 clip-path: circle(50% at 50% 50%)，但会牺牲部分旧机型兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
