使用了三种方式
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>