currentColor的使用场景记录

桐溪漂流

于 2022-04-13 17:41:35 发布

阅读量328

点赞数 1

分类专栏：小知识点文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/qq564280420/article/details/124153745

版权

小知识点专栏收录该内容

25 篇文章

订阅专栏

这篇博客探讨了如何利用CSS的currentColor属性让元素边框颜色继承其文字颜色，并在鼠标悬停时实现整体颜色改变的响应式效果。通过示例代码，展示了在常规情况和使用currentColor时的差异，对于前端开发者优化样式和提高代码复用性具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

常规

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