currentColor的使用场景记录

效果

常规

<div class="test-box">
    box-content
    <div class="test-item">item-1</div>
</div>

.test-box {
    width: 200px;
    height: 200px;
    padding: 16px;
    color: orange;
    border: 1px solid orange;
}
.test-box .test-item {
    border: 1px solid orange;
}
.test-box:hover {
    color: blue;
    border-color: blue;
}
.test-box:hover .test-item {
    border-color: blue;
}

使用currentColor

.test-box {
    width: 200px;
    height: 200px;
    padding: 16px;
    color: orange;
    border: 1px solid currentColor;
}
.test-box .test-item {
    border: 1px solid currentColor;
}
.test-box:hover {
    color: blue;
}