Question

对CSS来说还很新，我只想更改按钮的默认轮廓颜色。我相信我正在使用引导程序

到目前为止，当鼠标悬停在按钮上时，我可以更改按钮颜色，还可以更改默认文本颜色，但不能更改轮廓

我已经尝试过

.btn-outline-info{
color: #ea4335;
outline-color: #ea4335;
}

颜色部分起作用，但轮廓颜色不起作用

任何帮助将不胜感激

Answer 1

尝试使用边框颜色

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
.btn-outline-info {
  color: blue;
  border-color: red;
}
.btn-outline-info:hover {
  color: green;
  border-color: purple;
}
</style>

<button class="btn btn-outline-info">Info</button>

Answer 2

我认为您需要添加轮廓样式。例如，

轮廓样式：实心；轮廓颜色：＃92a8d1;

Answer 3

.btn:active {
 outline-color: red;
}

：处于活动状态是指将鼠标悬停在该按钮上

Answer 4

这将突出显示轮廓样式和颜色：

.btn-outline-info:focus {
  outline-style: solid;
  outline-color: #ea4335;
}

Answer 5

在CSS中，重要的是要记住，就像在HTML和javascript中一样，计算机不会做您想做的事，而只会做它必须做的事。它不知道CSS属性outline-colour是什么，因此它什么也不做。

使用border-color: (color)绘制按钮轮廓。或者，您可以使用border: 3px solid green;添加指定的边框，您可以对边框进行很多更改。要获得完整的解释，请访问W3学校站点。 https://www.w3schools.com/cssref/pr_border.asp

然后在悬停时，您可以执行此操作，

button:hover {
  border: 2px dotted blue;
  color: purple; 
}

此外，将来这种问题不需要对堆栈溢出进行全面讨论，可以很容易地对其进行研究和排除故障！

欢呼

CSS更改按钮的轮廓颜色

5 个答案: