Javascript Css：考虑背景颜色的辉光效果？

我正在尝试用HTML和CSS创建或多或少逼真的LED。如果led的颜色是静态的，那么为每个led添加辉光将是非常直接的。但我真的希望光晕自动调整到led颜色。 所以这是行不通的： 请不要告诉我为每种颜色创建一个类。最后，我希望LED在不同颜色之间褪色，因此我必须创建数百万个类

.led{
宽度：10px；
高度：10px；
边界半径：50%；
盒影：0px 0px 6px 2px#ff0000；
浮动：左；
右边距：10px；
}

---

好的，所以我使用JS用类“led”迭代所有元素，然后将它们的框阴影设置为背景颜色：

leds = document.getElementsByClassName('led');
for (var l = 0; l < leds.length; l++) {
    led = leds[l];
    led.style.boxShadow = '0 0 10px 1px ' + led.style.backgroundColor;
}

led=document.getElementsByClassName（'led'）；
对于（var l=0；l

---

如果更改元素的背景颜色，请确保再次运行此代码。

毕竟这是您的想法

.led{
宽度：20px；
高度：20px；
边界半径：50%；
盒影：嵌入0px 0px 11px 3px rgba（255255255,0.8）；
浮动：左；
右边距：10px；
}

---

CSS变量仍处于非常早期的阶段，但CSS中一个成熟可靠的变量是

currentColor

——顾名思义，它总是采用

color:

的当前值

因此，对上面的代码稍加修改，就可以得到您想要的：

.led{
宽度：10px；
高度：10px；
背景色：当前颜色；
边界半径：50%；
盒影：0px 0px 6px 2px currentColor；
浮动：左；
右边距：10px；
}

为什么不为每个LED创建一个不同的CSS类？给出的代码笔示例是否正确@扎克，因为我正计划让LED通过从000000到ffffff的各种颜色逐渐消失。而且我现在不想创建16777216类。@好吧，不。当led的背景颜色改变时，我希望发光自动看起来正确。@Forivin canvas更适合非常漂亮！-不知道它可以用于内联样式：-）太棒了！非常感谢你！背景色本身是否也存在此变量？它不存在。而且，我刚刚意识到，即将推出的CSS变量模块看起来也不能产生与

backgroundColor

变量等价的东西。。。看起来每个变量只能访问静态值，而不能访问命名属性（具有currentValue）。