html - 外部发光环绕图像？

Question

我正在尝试创建一个外发光效果来包围图像。

正如您在下面的代码片段中看到的那样，使用 box-shadow 属性，我只设法将发光相对于图像大小降低，从而产生类似阴影的效果，而不是整个图像周围的光晕。

有什么办法可以达到这种效果吗？

#container {
  background-color: black;
  height: 100px;
  width: 100px;
  padding: 30px;
}

img {
  border-radius: 50%;
  width: 100px;
  box-shadow: -10px -10px 10px -10px rgba(255, 255, 255, 1);
}

<div id='container'>
  <img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' />
</div>

Answer 1

你是说这样？

我已经更改了水平和垂直偏移量(box-shadow 属性中的前两个 -10px)。

#container {
    background-color:black;
    height:100px;
    width:100px;
    padding:30px;
}
img {
    border-radius:50%;
    width:100px;
    box-shadow: 0px 0px 10px 10px rgba(255,255,255,1);
}

<div id='container'>
  <img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' />
</div>