如何使用CSS为按钮设置圆角？（Full stack developer课程学习求助）

用CSS的border-radius属性就能轻松实现按钮圆角，下面是几种常用的实现方式：

• 统一设置四个角的圆角
  直接给按钮添加border-radius属性，数值越大，圆角弧度越明显：

  button {
    /* 固定像素值，适合大多数常规场景 */
    border-radius: 8px;
    /* 可选：如果按钮宽高相等，设置50%会变成圆形按钮 */
    /* border-radius: 50%; */
  }
  

• 单独控制部分角的圆角
  如果你只想让特定几个角有圆角，可以用单独属性或者简写语法：

  /* 单独设置左上和右下圆角 */
  button {
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  
  /* 简写语法，顺序为：左上 → 右上 → 右下 → 左下 */
  button {
    border-radius: 12px 0 12px 0;
  }
  

• 可直接复用的完整示例
  下面是包含不同圆角样式的完整代码：

  <button class="basic-rounded">基础圆角按钮</button>
  <button class="circle-btn">圆形按钮</button>
  <button class="partial-rounded">部分圆角按钮</button>
  

  .basic-rounded {
    border-radius: 6px;
    padding: 8px 18px;
    border: none;
    background-color: #0071e3;
    color: white;
    cursor: pointer;
  }
  
  .circle-btn {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    border: none;
    background-color: #34c759;
    color: white;
    cursor: pointer;
  }
  
  .partial-rounded {
    border-radius: 10px 0 10px 0;
    padding: 8px 18px;
    border: none;
    background-color: #ff3b30;
    color: white;
    cursor: pointer;
  }
  

另外，border-radius是现代浏览器普遍支持的属性，不需要添加浏览器前缀，放心使用即可。

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