为什么“边框颜色”被“颜色”覆盖？

Question

我有以下CSS：

.isActiveFilter {
  color: black;
  background-color: rgba(0, 184, 170, .5);
  padding: 15px 10px 10px 10px;
  border-color: red;
  border: 3px solid;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

出于某种原因，边框颜色呈现为黑色，不红，我会预料的那样，border-color在后置color。想法？

Answer 1

为什么“边框颜色”被“颜色”覆盖？....边框颜色呈现为黑色，而不是红色，因为我所期望的，因为border-color是后置color。想法？

您的问题在于您如何声明您的border-属性：

border-color: red;  /* sets the border color to red */
border: 3px solid;  /* sets the border color to default (black) */

您正在使用 对所有边框属性使用简写border，并且由于您没有在 中指定任何颜色border，因此将其设置为默认颜色，black在本例中，由color属性¹定义。并且由于您在border 之后 声明border-color，因此您将red使用black.

只需删除border-color并指定border属性中的任何边框颜色...

border-color: red;      /* <-- REMOVE THIS LINE */
border: 3px solid red;  /* set the border color here */

¹ “A<color>表示边框的颜色。如果没有设置，它的默认值是元素的color属性值（文本颜色，而不是背景颜色）。”