CSS：将边框颜色设置为父元素的背景颜色

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>

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

我想让子元素始终使用其父元素的背景颜色，而不是手动设置子元素的边框颜色。当两个元素都使用相同属性时，可以通过简单地继承该属性来实现此行为。是否有任何方法可以使用不同的属性来实现此行为？

谢谢

- user3479074

---

我能知道为什么子元素使用相同的“border-color”吗？ - Mohammad Usman

我正在尝试让font-awesome-icons变得更加“智能化”。似乎唯一实现这一点的方法是使用文本描边和背景颜色。由于背景元素在悬停/聚焦时会改变其颜色，因此我需要同时更改描边颜色。 - user3479074

Answer 1

你可以使用 border-color: transparent

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

这将允许您仅更改父容器的background，而无需每次覆盖子元素的border-color。

不要忘记将子元素的background-clip设置为padding-box，以便背景仅覆盖内容区域，不包括border。

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

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

- Mohammad Usman

---

这似乎是可行的，但不幸的是我实际上没有使用 border，而是 _-webkit-text-stroke_。使用 transparent 会导致浏览器显示文本颜色（其中文本是一个字体 awesome 图标）。 - user3479074

@user3479074：你应该在问题中更清楚地表达这些内容。创建一个“实际”的示例要比创建一个“类似”的示例好得多。 - Harry

谢谢Mohammad Usman提醒我将background-clip设置为padding-box，这解决了让我困惑已久的问题。加一赞！ - Dan Robinson

Answer 2

你可以使用CSS自定义属性，也称为变量-它们会被子元素继承，并且可用于任何属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

在父类中定义它们，然后您可以在父类和子类中重用它们：

.parent {
  --parent-mainfill: grey;
  --parent-hoverfill: darkcyan;
 
  width: 300px;
  height: 300px;
  background-color: var(--parent-mainfill);
  display: flex;
}

.child {
  width: 50%;
  height: 50%;
  background: white;
  margin: auto;
  border: 5px dotted var(--parent-mainfill);
}

.parent:hover {
  background-color: var(--parent-hoverfill);
}

.parent:hover>.child {
  border-color: var(--parent-hoverfill);
}

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

- tequilacat