css之单边阴影

css之单边阴影

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

效果：

原理：

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;
      }

 

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