假定以下代码段。
.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）会更改为相同的颜色。
我实际上不是希望手动设置孩子的边框颜色，而是希望孩子始终使用其父背景颜色。当两个元素都通过简单地继承相同的属性来使用时，这种行为很容易实现。有什么办法可以使用不同的属性来实现此行为？
谢谢