Question

我正在尝试使用HTML和CSS创建更多或更少逼真的LED。如果LED的颜色是静态的，那么为每个LED添加一个发光将非常简单。但我实际上希望发光能够自动调整到led颜色。所以这不起作用：https://fiddle.jshell.net/dwv5xxws/ 请不要告诉我为每种颜色创建一个类。最后我希望LED在颜色之间淡化，所以我必须创建数百万个类。

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0px 0px 6px 2px #ff0000;
  
  float:left;
  margin-right: 10px;
}

<div class="led" style="background-color:red"></div>
<div class="led" style="background-color:green"></div>
<div class="led" style="background-color:blue"></div>

这是启发我的原因： http://codepen.io/fskirschbaum/pen/MYJNaj

编辑：只是一个想法......也许我们可以增加LED的大小并在这些LED内部形成阴影覆盖，这样看起来外圈就像“发光”而不是led本身。

Answer 1

好的，所以我使用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;
}

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

Answer 2

CSS变量仍然处于非常早期阶段，但CSS中一个完善的，可靠的变量是color: - 顾名思义，它总是取任何.led { width: 10px; height: 10px; background-color: currentColor; border-radius: 50%; box-shadow: 0px 0px 6px 2px currentColor; float:left; margin-right: 10px; }的当前值。

因此，稍微调整一下上面的代码就可以得到您想要的内容：

<div class="led" style="color:red"></div>
<div class="led" style="color:green"></div>
<div class="led" style="color:blue"></div>

currentColor

有关<span ng-bind="::expression"></span>的浏览器支持，请参阅：http://caniuse.com/#feat=currentcolor

Answer 3

毕竟，这是你的想法......

＆＃13;

.led {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0px 0px 11px 3px rgba(255,255,255,0.8);
  float:left;
  margin-right: 10px;
}

＆＃13;

<div class="led" style="background-color:red"></div>
<div class="led" style="background-color:green"></div>
<div class="led" style="background-color:blue"></div>

＆＃13;

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

3 个答案: