圆角按钮直接用 border-radius 实现，如 button { border-radius: 8px; }，设为 50% 且宽高相等时呈正圆；支持四角分别控制，顺序为 tl→tr→br→bl；失效常见原因包括 overflow: hidden 裁剪、背景色混淆、background-clip 设置不当及旧版 safari 兼容问题；添加 hover 动效时应仅过渡 border-radius 属性，并避免使用 transition: all。
圆角按钮怎么写？直接用 border-radius
只要给按钮加 border-radius 就能变圆角，不需要额外容器或伪元素。最简写法就是：
button { border-radius: 8px; }数值越大越圆，设成 50% 就是正圆（前提是宽高相等）。注意：这个属性作用于所有四角，不是只影响某一个角。
border-radius 四个角可以分别控制吗？可以，但顺序容易错
支持按「上左、上右、下右、下左」顺时针顺序写四个值，比如：
border-radius: 4px 8px 12px 6px;对应 TL → TR → BR → BL。常见错误是记反顺序，或者误以为是「上右下左」（那是
margin 的旧习惯）。如果只写两个值，第一个是上下，第二个是左右；写三个值则是上、左右、下。
为什么按钮圆角不生效？这几个地方常被忽略
圆角失效通常不是 border-radius 本身的问题，而是被其他样式覆盖或限制：
- 父容器设置了
overflow: hidden，但按钮本身没触发层叠上下文（比如没设position: relative），导致圆角被裁剪 - 按钮有
border: none但背景色和父容器一样，看起来像没圆角——其实圆角在，只是没对比 - 用了
background-clip: padding-box（默认值），但如果你手动改成了border-box，而边框又为 0，就会让圆角“消失”感更强 - 在某些旧版 Safari 中，
border-radius对input[type="button"]支持不稳定，建议统一用button元素
圆角 + hover 动效要不要加过渡？加，但别全属性过渡
想让圆角变化平滑，必须配 transition，但别写 transition: all .3s —— 这会把颜色、阴影甚至重排都拖慢。只过渡需要的属性：
button { border-radius: 4px; transition: border-radius .2s ease; }<br>button:hover { border-radius: 8px; }另外注意：从 0 到 50% 的过渡在 Chrome 中可能有轻微闪烁，换成 999px 更稳妥（浏览器会自动 cap 到最大可取值）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
