我正在尝试创建一个外发光效果来包围图像。
正如您在下面的代码片段中看到的那样,使用 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>
最佳答案
你是说这样?
我已经更改了水平和垂直偏移量(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>
关于html - 外部发光环绕图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49974982/