html – CSS默认边框颜色

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

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

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

解决方法

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

如果你想继承父级的值(正如你提到问题中的父级所暗示的那样),那么你必须明确地继承它.

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