使用了三种方式
attr可以用于content: attr()，本次传递颜色值没有成功currentColor获取可以当前颜色值var(--color)可以获取当前作用域内的变量值
效果如下
完整代码
<style> .box-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } .box { width: 100px; height: 100px; line-height: 100px; text-align: center; border: 1px solid #dddddd; } .box-1 { background-color: attr(data-color); } .box-2 { background-color: currentColor; } .box-3 { background-color: var(--color); } </style> <div class="box-wrapper"> <div class="box box-1" data-color="red">attr</div> <div class="box box-2" style="color: green">currentColor</div> <div class="box box-3" style="--color: red">var</div> </div>
参考
