我正在尝试创建一个外部发光效果来包围图像。
正如你在下面的代码片段中看到的那样,使用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>
你的意思是这样的?
我已经改变了水平和垂直偏移(你的-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>
更改您的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>