CSS默认边框颜色

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;
}