Question

我试图为环绕图像创建外部发光效果。

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

有没有办法达到这个效果？

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

Answer 1

你的意思是这样吗？

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

#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>

Answer 2

更改box-shadow值：

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

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

外部发光环绕图像？

2 个答案: