我有一个简单的问题。我已经创建了一个带有 css 属性的按钮，但是如果我使用 button：active 并尝试对某些内容进行动画处理并不重要，我会在我的按钮顶部和左侧得到一些烦人的"阴影"。如何删除它们？我是堆栈溢出的新手，我希望我在这里没有做错任何事:)
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>您的按钮仍在使用默认边框样式;您可以通过添加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>