Swift：如何修改按钮边框颜色（含特定圆角按钮）

嘿，我来帮你搞定这个按钮样式的问题！要实现你说的「按钮1左上/左下圆角、按钮4右上/右下圆角」+ 对应边框颜色的效果，用CSS就能轻松实现，下面分两种常见场景给你具体方案：

场景1：四个按钮是并排的组合（无缝衔接） #

这种情况是最常见的，比如类似导航按钮组的效果，四个按钮连在一起没有缝隙：

HTML结构 #

<div class="button-group">
  <button class="btn btn-1">按钮1</button>
  <button class="btn btn-2">按钮2</button>
  <button class="btn btn-3">按钮3</button>
  <button class="btn btn-4">按钮4</button>
</div>

CSS样式 #

/* 按钮组容器，消除按钮间的缝隙 */
.button-group {
  display: flex;
}

/* 所有按钮的基础样式 */
.btn {
  padding: 8px 16px;
  border: 2px solid #2563eb; /* 这里替换成你需要的边框主色 */
  background-color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  margin: 0;
  /* 先统一去掉左边框，避免中间按钮出现双重边框 */
  border-left: none;
}

/* 按钮1：左上、左下圆角 + 恢复左边框 */
.btn-1 {
  border-radius: 8px 0 0 8px; /* 圆角大小可根据需求调整 */
  border-left: 2px solid #2563eb;
  /* 如果需要某条边的边框颜色不同，比如左边框用深色：
  border-left-color: #1d4ed8;
  */
}

/* 按钮2、3：直角，保持衔接 */
.btn-2, .btn-3 {
  border-radius: 0;
}

/* 按钮4：右上、右下圆角 */
.btn-4 {
  border-radius: 0 8px 8px 0;
  /* 如果需要右边框颜色不同：
  border-right-color: #1d4ed8;
  */
}

场景2：四个按钮是独立的（不并排） #

如果四个按钮是分开的，直接给每个按钮单独设置圆角和边框即可：

CSS样式示例 #

/* 按钮1：左上、左下圆角 + 自定义边框色 */
.btn-1 {
  padding: 8px 16px;
  border: 2px solid #2563eb;
  border-radius: 8px 0 0 8px;
  /* 单独调整某条边颜色：
  border-top-color: #f59e0b;
  border-bottom-color: #f59e0b;
  */
}

/* 按钮4：右上、右下圆角 + 自定义边框色 */
.btn-4 {
  padding: 8px 16px;
  border: 2px solid #2563eb;
  border-radius: 0 8px 8px 0;
}

/* 按钮2、3：默认直角边框 */
.btn-2, .btn-3 {
  padding: 8px 16px;
  border: 2px solid #2563eb;
}

关键知识点 #

• 用 border-radius 控制圆角：格式是「左上 右上 右下 左下」，所以按钮1写 8px 0 0 8px，按钮4写 0 8px 8px 0 就对应你要的圆角效果。
• 要单独修改某条边的边框颜色，直接用 border-[方向]-color 属性（比如 border-left-color）即可，不用重新写整个border属性。

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