css - 为什么 "border-color"被 "color"覆盖？

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

Why is “border-color” overridden by “color”? .... border color renders as black, not red as I would expect, as border-color is set after color. Thoughts?

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

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

您正在使用 border 对所有边框属性使用速记，并且由于您没有在 border 中指定任何颜色，因此它被设置为默认颜色，在本例中为 black， as defined by the color property 1。并且由于您在之后声明 border border-color ，你用 red 覆盖了 black 。

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

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

1 "A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color)."