结论：用 border-radius + background-image: linear-gradient() 可纯 css 实现圆角按钮，需注意宽高比、border-radius 值设定、overflow: hidden、background-image 与 background-color 分离、background-position 实现渐变动画、移动端点击反馈及语义化结构。
直接说结论：用 border-radius + background-image: linear-gradient() 就能搞定，不需要图片、不用 JS，现代浏览器全支持，但有几个关键点新手容易卡住。
button 圆角怎么设才不变成“椭圆”或“切边”
新手常把 border-radius: 50% 往长方形按钮上一贴，结果发现左右是圆的、上下被压扁，或者四角不均匀——这是因为 50% 是按各自方向的宽度/高度算的，不是固定像素。
- 胶囊形按钮（最常用）：宽高不等时，
border-radius必须设成高度的一半，比如height: 40px→border-radius: 20px；写成border-radius: 50%反而可能出错 - 正圆形按钮：必须保证
width和height完全相等，再配border-radius: 50% - 四角分别控制：用
border-radius: 8px 16px 8px 16px这种写法，顺序是「上左、上右、下右、下左」，别记反 - 别漏掉
overflow: hidden：如果按钮里有图标或伪元素超出边界，圆角会失效
渐变背景写 background 还是 background-image
很多教程直接写 background: linear-gradient(...)，看起来能跑，但实际埋了坑——老项目升级、后续加 background-color 降级、或者想叠加纹理时，会覆盖出问题。
- 推荐显式写
background-image: linear-gradient(135deg, #4facfe, #00f2fe)，把颜色层留给background-color做兜底 - IE11 不认
linear-gradient？加一行background-color: #4facfe，它就自动忽略渐变、只显示单色 - 别用
background简写覆盖整个背景：比如后面加background: url(...) no-repeat，会把渐变整个干掉
悬停动画为什么不动？渐变本身不能 transition
新手写 transition: background 0.3s，发现鼠标移上去颜色没变化——因为 background-image 不是可过渡属性，CSS 标准里它属于“非插值类型”。
- 真正能动的是
background-position：配合background-size: 400% 400%，悬停时改background-position: 50% 50% - 换颜色？别试图过渡渐变色值，老老实实写两套
background-image，用:hover切换 class 或直接写伪类 - 移动端点击没反馈？加
touch-action: manipulation，再补一句button:active { opacity: 0.85; }，比transform: scale()更稳
胶囊导航按钮组合要注意语义和响应式
很多人用一堆 <div class="btn"> 拼导航栏，看着像胶囊，但对屏幕阅读器不友好，缩放时还容易错位。
<ul>
<li>结构必须用 <code><nav><ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul></nav>，别用 button 或 div 冒充链接
padding 而不是固定宽高：比如 padding: 8px 24px，文字多就撑开，少就收窄，比设 width: 120px 更健壮border-radius: 24px（假设行高约 48px），但记得所有按钮统一单位，别混用 px 和 %
flex-wrap: wrap 或媒体查询里改成竖排，别让文字被截断真正麻烦的不是写出来，而是改——比如后期要统一调色、适配深色模式、加加载态，这时候 CSS 变量和伪元素分层就显出价值了。别一开始就把所有样式塞进一个 class 里。
