通过CSS的狭缝线效果

这是一个粗略的近似开始.您需要调整细节.基本上我所做的就是创建一个悬垂div,在它下面是一个div,它会在末端产生一个带有衰减的阴影.悬伸div位于较高层,因此您只能看到阴影的边缘.

演示：
http://jsfiddle.net/X5muV/

另一个,稍微暗一点：http://jsfiddle.net/X5muV/1/

HTML：

<div id="container">
    <div id="overhang"></div>
    <div id="falloff-shadow"></div>
</div>

CSS：

#container { 
      BACkground: #5A5A5A; 
      width: 700px; 
      padding: 200px 0 80px 0px;
   }
    #overhang { 
      BACkground: #5A5A5A; 
      border-top: 1px solid #666; 
      height: 80px; 
      width: 600px; 
      margin: 0 auto; 
      position: relative; 
      z-index: 5;
    }
    #falloff-shadow { 
      width: 500px; 
      margin: 0 auto;
      -webkit-box-shadow: 0px 5px 50px 5px rgba(0,1);
      -moz-box-shadow: 0px 5px 50px 5px rgba(0,1);
      box-shadow: 0px 5px 50px 5px rgba(0,1);
      position: relative;
      z-index: 1;
      height: 1px;
      top: -65px;
    }

@H_874_2@ @H_874_2@

大佬总结

以上是大佬教程为你收集整理的通过CSS的狭缝线效果全部内容，希望文章能够帮你解决通过CSS的狭缝线效果所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。