我的按钮周围为何出现box shadow？自定义按钮样式问题咨询

你遇到的按钮阴影问题，核心原因有两个：一是浏览器自带的按钮默认样式（部分浏览器会给button添加默认阴影或外轮廓），二是你写的box-shadow: 0语法无效，正确的清除阴影写法是box-shadow: none。同时还有几个细节可以优化，让按钮完全符合你的需求：

1. 清除默认阴影与完善边框样式 #

修改按钮基础样式，补充以下关键属性：

• box-shadow: none：彻底清除所有阴影（包括浏览器默认的阴影效果）
• border: 2px solid var(--accent)：明确设置边框的宽度、样式和颜色——只单独设置border-color的话，默认border-style为none，边框不会显示出来
• outline: none：移除按钮聚焦时的默认外轮廓（如果需要兼顾可访问性，可以自定义聚焦样式替代）

2. 简化点击位移逻辑 #

你写的button:active里transform: translateY(-0px)可以简化为transform: translateY(0)，效果完全一致，代码更简洁。

修改后的完整代码 #

CSS #

/* 先定义变量（如果之前没定义的话） */
:root {
  --accent: #165DFF; /* 替换成你需要的蓝色值 */
  --background: #ffffff; /* 替换成你需要的文本颜色 */
}

button {
  background-color: var(--accent);
  border-radius: 10px;
  box-shadow: none; /* 清除所有阴影 */
  border: 2px solid var(--accent); /* 确保边框与主体颜色一致 */
  outline: none; /* 移除默认聚焦外轮廓 */
  color: var(--background);
  padding: 7px 15px; /* 简化padding的写法 */
  cursor: pointer;
  transition: transform 0.3s;
}

button:hover {
  transform: translateY(-3px);
}

button:active {
  transform: translateY(0); /* 点击时恢复原位 */
}

/* 可选：自定义聚焦样式，兼顾可访问性 */
button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

HTML #

<button>Button</button>

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