如何使用border-radius属性实现图示样式的按钮效果？

完全可以，仅靠border-radius属性就能做出你图里的胶囊形按钮，不需要额外切图或者用其他复杂属性。

按钮示例

实现逻辑 #

border-radius的作用是给元素的四个角设置圆角半径，当左右两个方向的圆角半径等于按钮高度的一半时，按钮两端就会变成完美的半圆弧，就是你截图里的效果。
实际写代码的时候不用手动算按钮高度再除以2凑数值，直接给border-radius设一个远大于按钮高度的值就行，业内常用写法是9999px——浏览器不会真的渲染9999px的超大圆角，会自动取按钮高度一半的最大值来适配，之后就算你调整按钮的内边距、改字号导致按钮高度变化，圆角效果也不会变形，适配性很好。

可直接复用的代码 #

HTML部分：

<button class="capsule-btn">确认提交</button>

CSS部分：

.capsule-btn {
  /* 基础样式可以根据你的设计需求调整 */
  padding: 12px 30px;
  font-size: 16px;
  color: #fff;
  background: #2163e8;
  border: none;
  cursor: pointer;
  /* 核心圆角属性，一行实现胶囊效果 */
  border-radius: 9999px;
}

额外提示 #

• 如果你要做普通小圆角按钮，不用写9999px，直接写固定值就行，比如border-radius: 6px就是常见的轻圆角样式
• border-radius支持单独给四个角设值，顺序是「左上 → 右上 → 右下 → 左下」，比如border-radius: 10px 10px 0 0就只有顶部两个角带圆角，可以实现更多异形角效果
• 如果渲染出来的圆角边缘有锯齿，给按钮加一句transform: translateZ(0)触发硬件加速就能解决大部分显示问题

内容的提问来源于stack exchange，提问作者Sanowar Dewan