外部发光环绕图像?

问题描述 投票:2回答:2

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

正如你在下面的代码片段中看到的那样,使用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>
html css
2个回答
4
投票

你的意思是这样的?

我已经改变了水平和垂直偏移(你的-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>

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>
© www.soinside.com 2019 - 2024. All rights reserved.