为什么“边框颜色"如此被“颜色"覆盖? [英] Why is "border-color" overridden by "color"?

问题描述

我有以下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;
}

由于某种原因，边框颜色呈现为黑色，而不是我期望的红色，因为在 color 之后设置了 border-color .有想法吗?

For some reason, border color renders as black, not red as I would expected, as border-color is set after color. Thoughts?

推荐答案

为什么边框颜色"被颜色"所覆盖?....边框颜色呈现为黑色，而不是我期望的红色，因为在 color 之后设置了 border-color .有什么想法吗?

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-属性:

Your problem lies within how you've declared your border- properties:

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 替换为>黑色.

You're using the shorthand for all border properties using border, and since you didn't specify any color within border, it's set to the default color, which is black in this case, as defined by the color property¹. And since you're declaring border after border-color, you're over-riding red with black.

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

Simply remove border-color and specify any border color within the border property...

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

---

¹ "A < color> 表示边框的颜色，如果未设置，则默认值为元素的 color 属性的值(文本颜色，而不是背景颜色)."

---

¹ "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)."

这篇关于为什么“边框颜色"如此被“颜色"覆盖?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！