box-shadow制作边框模糊

来源:互联网 发布:数据挖掘建模 编辑:程序博客网 时间:2024/06/07 16:11


不用border,直接用box-shadow的阴影效果来做边框,然后再用模糊做泛出,

.iconb{
width: 18px;
height: 18px;
background-color: #188eee;
box-shadow: 0px 0px 0px 5px #c9e0f4;
border-radius: 50%;
position: absolute;
z-index: 1;
left: 20px;
}
.icon1{
top: 30px;
}
.icon2{
top: 310px;
}
.icon1:hover,.icon2:hover{
animation: icon 0.5s infinite ease-in-out;
animation-fill-mode:both;
animation-direction:alternate;
}


@keyframes icon{
from{
box-shadow: 0px 0px 1px  1px #c9e0f4;
}
to{
box-shadow: 0px 0px 0px 5px #c9e0f4;
}
}