CSS：将border-color设置为父级的background-color

Question

假定以下代码段。

.parent {
  width: 300px;
  height: 300px;
  background-color: grey;
  display: flex;
}

.child {
  width: 50%;
  height: 50%;
  background: white;
  margin: auto;
  border: 5px dotted grey;
}

.parent:hover {
  background-color: darkcyan;
}

.parent:hover>.child {
  border-color: darkcyan;
}

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

请注意，child-div的边框颜色与parent-div相同。悬停parent-div时，其背景颜色会更改，而child-div的边框颜色（实际上我正在使用-webkit-text-stroke）会更改为相同的颜色。

我实际上不是希望手动设置孩子的边框颜色，而是希望孩子始终使用其父背景颜色。当两个元素都通过简单地继承相同的属性来使用时，这种行为很容易实现。有什么办法可以使用不同的属性来实现此行为？

谢谢

Answer 1

您可以使用 border-color: transparent

.parent:hover > .child {
  border-color: transparent;
}

这样您就可以background只更改父母，而不必border-color每次都覆盖孩子。

不要忘记将child设置background-clip为，padding-box 以便背景仅覆盖除以外的内容区域border。

.parent:hover > .child {
  border-color: transparent;
}

* {box-sizing: border-box;}
.parent {
  width: 300px;
  height: 300px;
  background-color: grey;
  display: flex;
}

.child {
  width: 50%;
  height: 50%;
  background: white;
  background-clip: padding-box;
  margin: auto;
  border: 5px solid grey;
}

.parent:hover {
  background-color: darkcyan;
}

.parent:hover>.child {
  border-color: transparent;
}