我想知道是否可以通过以下方式为CSS添加一些灵活性:
<div class='round5'></div>
其中.round
是一个带有圆角的类,“ 5”确定半径的大小。可能吗?我已经看到了一些地方,但是我不知道实现是如何发生的。
对于在2018年陷入困境的任何人,虽然没有完全支持的CSS变量现在使您能够将变量直接传递到类中。
<div class="round" style="--radius: 100%;"></div>
<style>
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
您还可以定义根变量并将其传递给
<div class="round" style="--radius: var(--rad-50);"></div>
<style>
:root {
--rad-0: 0%;
--rad-50: 50%;
--rad-100: 100%;
}
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
这也适用于该元素。如果--radius
在一个元素中设置in,则不会影响另一个元素。爵士乐吧!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句