HTML-CSS如何为按钮单个角设置border-radius圆角

CSS提供了单独控制每个圆角的专属属性，也可以通过border-radius简写语法实现需求，具体用法如下：

1. 单角专属属性实现（可读性更高） #

四个角分别对应独立的CSS属性，你可以按需给对应角赋值，其余角默认是0（直角）：

• 左上角：border-top-left-radius
• 右上角：border-top-right-radius
• 右下角：border-bottom-right-radius
• 左下角：border-bottom-left-radius

示例代码（仅左上角设置30px圆角）：

.button {
  /* 注意必须加合法长度单位，比如px、rem、%等，缺省会导致属性不生效 */
  border-top-left-radius: 30px;
  /* 以下为可选补充样式，可根据需求调整 */
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  cursor: pointer;
}

<button type="button" class="button">Button</button>

2. border-radius简写实现 #

border-radius简写的四个值对应顺序为「左上 → 右上 → 右下 → 左下」，不需要圆角的角设置为0即可：

/* 仅左上角30px圆角，其余角为直角 */
.button {
  border-radius: 30px 0 0 0;
}

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