css之单边阴影

css之单边阴影

需求:在网上找的其他博客上说单边阴影需要牺牲掉模糊,实际上牺牲掉模糊直接用border不就好了

效果:

css之单边阴影

原理:

1.在左边的外阴影就是右边的内阴影

2.将box-shadow写在before或者after上面,然后将父元素设置为overflow:hidden

代码:

#footer{
position: relative;
z-index: 800;
height: 27px;
overflow: hidden;
}
&:before{
content: "";
position: absolute;
left:0;
width: 100%;
height:0;
box-shadow: 0 0 6px 4px rgba(0,0,0,0.1);
background:#eee;
}

钻研不易,转载请注明出处。。。。。。

上一篇:一致性环Hash算法.NET实现


下一篇:Android Priority Job Queue (Job Manager):线程任务的容错重启机制(二)