Question

我们有以下html标记：

<div id="parent" class="parent">
    <div id="child" class="child">
    </div>
</div>

和相应的css样式：

.parent{
    border-style: solid;
    border-color: green;
    border-bottom: solid 10px;
    background:grey;
    width: 300px;
    height: 300px;
    padding: 10px;
}
.child{
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

.parent {
  border-style: solid;
  border-color: green;
  border-bottom: solid 10px;
  background: grey;
  width: 300px;
  height: 300px;
  padding: 10px;
}
.child {
  border: 20px solid;
  background: aqua;
  height: 50px;
  margin: 10px;
}

<div id="parent" class="parent">
  <div id="child" class="child">
  </div>
</div>

我们可以看到孩子的边框颜色是黑色，但我没有明确定义这种颜色。

如何将此默认颜色更改为绿色？

Answer 1

您无法更改默认值。默认值是浏览器将其定义为的任何内容。

如果你想继承来自父级的值（正如你提到问题中的父级所暗示的那样），那么你必须明确地继承它。

.child {
    border-color: inherit;
}

您还必须不使用省略颜色值的速记border属性，因为这会将属性重置为默认值。

.child {
    border-color: inherit;
    border-width: 20px;
    border-style: solid;
}

你也可以简单明了：

.child {
    border-color: green;
    border-width: 20px;
    border-style: solid;
}

Answer 2

* { border-color: green; }

请注意，从性能角度来看，不鼓励使用通配符选择器

Answer 3

在border-color: green;课程中添加.child。 See updated fiddle

Answer 4

您可以更改以下更改以使边框颜色为绿色

.child {
border : 20px solid green;
}

Answer 5

如果它只是子类的div，则可以在样式表中使用它。

.child { border-color:#00ff00!important; }

Answer 6

这是浏览器行为，在您应用任何主题之前无法更改该行为，您可以通过使用以下方式覆盖颜色：

border-color: green;

Here is fiddle

Answer 7

目前接受的大部分答案都不准确：

您可以更改默认边框颜色：不是通过CSS，而是通过用户的图形环境（系统设置，通常可用作操作系统中的桌面设置）。

您可以省略border速记属性中的颜色值。在CSS3中，border-color随后设置为currentColor，也可以明确指定。

border: 1px solid currentColor; /* CSS3 */

默认情况下， currentColor 通常为黑色系统设置。在CSS2中，您还可以使用其他系统值，请参阅上面的链接。这些已被弃用，但仍在我的Opera中工作。

border: 1px solid ThreeDDarkShadow; /* CSS2 deprecated */

现在我的环境中的颜色是灰色的。 CSS2值是（引用上面的链接）：

ActiveBorder，ActiveCaption，AppWorkspace，背景，ButtonFace， ButtonHighlight，ButtonShadow，ButtonText，CaptionText，GrayText，突出显示，HighlightText，InactiveBorder，InactiveCaption， InactiveCaptionText，InfoBackground，InfoText，Menu，MenuText，滚动条，ThreeDDarkShadow，ThreeDFace，ThreeDHighlight， ThreeDLightShadow，ThreeDShadow，Window，WindowFrame，WindowText。

注意： currentColor 与 inherit 不同（这将解决Quentin建议的问题）并且没有像border-color属性中的> default ， auto 或 initial 。有人可能会认为，如果您指定无效或浏览器不支持的颜色，浏览器必须选择一些颜色，如果无法推断该颜色，它会逻辑上选择系统颜色，因为浏览器不会停止输出语法错误。但是，有些浏览器会实现a mystical numerologic algorithm来推断未知字符串的颜色。它不适用于我的歌剧。

检查代码段中的系统颜色

＆＃13;

  div { float: left; margin: 5px; width: 125px; padding: 20px; border: 1px solid black; color: #800; text-shadow: 0 1px black;}
  .ActiveBorder { background-color: ActiveBorder; }
  .ActiveCaption { background-color: ActiveCaption; }
  .AppWorkspace { background-color: AppWorkspace; }
  .Background { background-color: Background; }
  .ButtonFace { background-color: ButtonFace; }
  .ButtonHighlight { background-color: ButtonHighlight; }
  .ButtonShadow { background-color: ButtonShadow; }
  .ButtonText { background-color: ButtonText; }
  .CaptionText { background-color: CaptionText; }
  .GrayText { background-color: GrayText; }
  .Highlight { background-color: Highlight; }
  .HighlightText { background-color: HighlightText; }
  .InactiveBorder { background-color: InactiveBorder; }
  .InactiveCaption { background-color: InactiveCaption; }
  .InactiveCaptionText { background-color: InactiveCaptionText; }
  .InfoBackground { background-color: InfoBackground; }
  .InfoText { background-color: InfoText; }
  .Menu { background-color: Menu; }
  .MenuText { background-color: MenuText; }
  .Scrollbar { background-color: Scrollbar; }
  .ThreeDDarkShadow { background-color: ThreeDDarkShadow; }
  .ThreeDFace { background-color: ThreeDFace; }
  .ThreeDHighlight { background-color: ThreeDHighlight; }
  .ThreeDLightShadow { background-color: ThreeDLightShadow; }
  .ThreeDShadow { background-color: ThreeDShadow; }
  .Window { background-color: Window; }
  .WindowFrame { background-color: WindowFrame; }
  .WindowText { background-color: WindowText; }

＆＃13;

<div class="ActiveBorder">ActiveBorder</div>
<div class="ActiveCaption">ActiveCaption</div>
<div class="AppWorkspace">AppWorkspace</div>
<div class="Background">Background</div>
<div class="ButtonFace">ButtonFace</div>
<div class="ButtonHighlight">ButtonHighlight</div>
<div class="ButtonShadow">ButtonShadow</div>
<div class="ButtonText">ButtonText</div>
<div class="CaptionText">CaptionText</div>
<div class="GrayText">GrayText</div>
<div class="Highlight">Highlight</div>
<div class="HighlightText">HighlightText</div>
<div class="InactiveBorder">InactiveBorder</div>
<div class="InactiveCaption">InactiveCaption</div>
<div class="InactiveCaptionText">InactiveCaptionText</div>
<div class="InfoBackground">InfoBackground</div>
<div class="InfoText">InfoText</div>
<div class="Menu">Menu</div>
<div class="MenuText">MenuText</div>
<div class="Scrollbar">Scrollbar</div>
<div class="ThreeDDarkShadow">ThreeDDarkShadow</div>
<div class="ThreeDFace">ThreeDFace</div>
<div class="ThreeDHighlight">ThreeDHighlight</div>
<div class="ThreeDLightShadow">ThreeDLightShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="Window">Window</div>
<div class="WindowFrame">WindowFrame</div>
<div class="WindowText">WindowText</div>

＆＃13;

Answer 8

使用color:green。如果未指定border-color，则浏览器会使用元素的文本颜色作为其边框颜色

CSS默认边框颜色

8 个答案: