如何仅为按钮的左侧边角设置圆角效果？

你可以通过CSS的border-radius属性单独指定左上、左下两个角的圆角值实现该效果，右侧两个角保持为0即可，不需要额外嵌套元素。

核心CSS代码 #

写法1：单独指定左侧两角，可读性更高 #

.left-radius-btn {
  /* 单独设置左上和左下圆角，圆角大小可按需调整 */
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  /* 以下为按钮基础样式，可根据需求自定义修改 */
  padding: 6px 14px;
  border: 1px solid #ddd;
  background: #409eff;
  color: #fff;
  line-height: 1.5;
  cursor: pointer;
}

写法2：简写属性，代码更精简 #

border-radius的简写顺序为左上、右上、右下、左下，所以直接把右上和右下的数值设为0即可：

.left-radius-btn {
  border-radius: 8px 0 0 8px;
  /* 其他按钮基础样式同上 */
}

配套HTML示例 #

<button class="left-radius-btn">点击按钮</button>

注意事项 #

• 圆角数值支持px、em、rem、百分比等多种单位，可根据设计需求调整。
• 目前所有主流浏览器均原生支持该属性，不需要额外加兼容性前缀。

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