如何在 CSS 中删除按钮“阴影”答案

【问题标题】：How to remove a Button "shadow" in CSS如何在 CSS 中删除按钮“阴影”
【发布时间】：2019-12-29 22:09:34
【问题描述】：

我有一个简单的问题。我已经创建了一个带有 css 属性的按钮，但是如果我使用 button:active 并尝试为某些东西设置动画并不重要，我会在按钮的顶部和左侧得到一些令人讨厌的“阴影”。我怎样才能删除它们？我是 Stack Overflow 的新手，希望我不会在这里做错任何事 :)

button {
  width: 50px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  transition: 0.3s;
  background-color: white;
  border-width: 0px;
  box-sizing: border-box;
  color: grey;
  border-color: rgb(70, 196, 255);
  box-shadow: none;
}

button:hover {
  border-left-width: 5px;
}

button:active {
  border-color: rgb(123, 20, 80);
}

button:focus {
  outline: 0;
}

body {
  background-color: black;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button></button>
</body>

【问题讨论】：

如果我按下按钮，左边框应该会变成紫色，但它会变得近乎黑色。这就是我所说的“影子”。

标签： css button shadow

【解决方案1】：

您的按钮仍然使用默认的边框样式；你可以通过添加border-style: solid来解决这个问题

button:active {
  border-color: rgb(123, 20, 80);
  border-style: solid
}

然后使用速记版本border 在同一行中定义宽度、样式和颜色可能会更容易

button {
  width: 50px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  transition: 0.3s;
  background-color: white;
  border-width: 0px;
  box-sizing: border-box;
  color: grey;
  border-color: rgb(70, 196, 255);
  box-shadow: none;
}

button:hover {
  border-left-width: 5px;
}

button:active {
  border-color: rgb(123, 20, 80);
  border-style: solid;
}

button:focus {
  outline: 0;
}

body {
  background-color: black;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button></button>
</body>

【讨论】：

谢谢！ :) 是的，您对边框命令是正确的，但我认为使用更多代码来获得相同结果是一种习惯。