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-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在这种情况下，as defined by the color property ¹。而且，由于您在 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> 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)."

Answer 2

您使用了边框的简写定义，但未指定颜色，因此默认为黑色。您有两个选择：

border-color: red;
border-width: 3px;
border-style: solid

或者只是正确使用速记：

border: 3px solid red;

Answer 3

尝试删除border-color: red;并将border: 3px solid;更改为border: 3px solid red;

Answer 4

border CSS属性是一个速记属性... border-width，border-style和border-color ... A <color>表示颜色边界。如果未设置，则其默认值为元素的color属性的值（文本颜色，而不是背景颜色）... - MDN

缺少border: 3px solid;（没有颜色），然后颜色从元素的color值继承。例1：

span {
  color: blue;
  border: 3px solid;
}

<span>Text sample</span>

如果元素上未定义color，它将在父元素上查找color，如果它在父元素上也未定义，它将回退到浏览器默认颜色{{ 1}}。例2：

black

body {
  color: green;
}
span {
  border: 3px solid;
}

如果按照以下顺序设置顺序，它将按预期工作。例3：

<span>Text sample</span>

span {
  border: 3px solid; /*first*/
  border-color: red; /*second*/
}

但是，使用完整的短缺集会更容易：

<span>Text sample</span>

Answer 5

我只想向您展示有关在单独的类中定义的边框颜色的所有情况。

body {
  color: blue;
}
.colorbefore {
  border-color: red;
}
.easybordered {
  border-left: 3px solid;
}
.complexbordered {
  border-left-width: 3px;
  border-left-style: solid;
}
.colorafter {
  border-color: red;
}

<div class="easybordered colorbefore">
Blue
</div>

<div class="colorbefore easybordered">
Blue
</div>

<div class="easybordered colorafter">
Red
</div>

<div class="complexbordered colorbefore">
Red
</div>

<div class="complexbordered colorafter">
Red
</div>

如前所述，重要的是：

CSS中border-style和border-color的定义顺序（不是“ class”属性给出的类的顺序”）
通过定义边框样式，边框颜色和边框宽度将边框定义为单线或“成块”
“颜色”属性在目标div上有效

Answer 6

＆＃13;

#works {
  border: 3px solid;
  border-color: red;
  }

#broken {
  border-color: red;
  border: 3px solid;
  }

＆＃13;

<p id="works">Some Text</p>

<p id="broken">doesn't work</p>

＆＃13;

将颜色放在边框

之后

border: 3px solid;
border-color: red;

虽然其他答案更好，但这对我来说很有效。

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

6 个答案: