如何实现底部边角为圆角的curved button按钮？

你要实现的是底部左右两侧带有向内凹陷圆角的特殊按钮，以下是几种常用的前端实现方式：

方法1：径向渐变实现（无额外元素，适配性强） #

无需额外DOM元素，支持渐变、图片等复杂按钮背景：

<button class="curved-btn">确认按钮</button>

.curved-btn {
  /* 基础按钮样式 */
  width: 200px;
  height: 50px;
  border: none;
  color: #fff;
  font-size: 16px;
  /* 核心：底部左右两个透明径向渐变模拟内凹 */
  background: 
    radial-gradient(circle at left bottom, transparent 15px, #2385bb 0) left,
    radial-gradient(circle at right bottom, transparent 15px, #2385bb 0) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
}

修改代码里的15px即可调整内凹圆角的大小，修改#2385bb为你需要的按钮颜色即可。

方法2：伪元素实现（兼容性最佳，适合纯色背景场景） #

如果页面背景是纯色，可以用伪元素遮罩的方式实现，兼容性远高于其他方案：
HTML代码和上述一致，CSS代码如下：

.curved-btn {
  width: 200px;
  height: 50px;
  border: none;
  background-color: #2385bb;
  color: #fff;
  font-size: 16px;
  position: relative;
}
/* 左右两个伪元素做遮罩 */
.curved-btn::before, .curved-btn::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  bottom: 0;
  background-color: #fff; /* 和页面背景色保持一致 */
}
.curved-btn::before {
  left: 0;
  border-top-right-radius: 15px;
}
.curved-btn::after {
  right: 0;
  border-top-left-radius: 15px;
}

方法3：clip-path实现（自定义灵活度最高） #

如果需要调整更复杂的弧度、或者要做特殊形状延伸，可以用clip-path直接裁剪按钮形状：

.curved-btn {
  width: 200px;
  height: 50px;
  border: none;
  background-color: #2385bb;
  color: #fff;
  font-size: 16px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px));
}

自行调整clip-path的坐标参数，就能实现不同的凹陷效果。

如果需要给按钮添加边框，推荐使用方法2配合伪元素的边框样式实现，或者用box-shadow外扩模拟边框效果，避免裁剪类方案导致边框被切掉。

内容的提问来源于stack exchange，提问作者Mustafa Özgün