求助：如何使用CSS移除按钮文本周围的边框？

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是：你把样式都应用在了父级的.delete-style容器上，但按钮本身自带浏览器默认的边框、背景和内边距样式，这些默认样式才是你看到的文本周围的边框哦。

正确的实现方法 #

你不需要修改现有的HTML，只需要调整CSS，把样式直接应用到按钮元素上，覆盖它的默认样式：

完整CSS代码

.delete-style {
  background-color: red;
  padding: 10px 20px;
  display: inline-block;
}

.delete-style button {
  border: none; /* 移除按钮默认边框，解决问题的核心 */
  background: transparent; /* 让按钮背景透明，透出父容器的红色 */
  color: white; /* 设置文字为白色，和红色背景形成清晰对比 */
  cursor: pointer; /* 鼠标悬停显示手型，优化交互体验 */
  outline: none; /* 移除点击后的默认轮廓线（可选） */
}

/* 可选：兼顾可访问性，保留键盘焦点样式 */
.delete-style button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

关键代码说明 #

• border: none;：直接去掉按钮自带的默认边框，这是消除文本周围多余边框的核心操作
• background: transparent;：消除按钮自带的灰色背景，让父容器的红色完全透出来
• color: white;：红色背景搭配白色文字，提升内容可读性
• 额外添加的:focus-visible样式：避免完全移除焦点样式导致键盘导航用户无法识别按钮，兼顾网页可访问性

这样设置后，按钮就不会有多余的边框，完美呈现你想要的效果啦！

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