通过CSS的狭缝线效果

前端之家收集整理的这篇文章主要介绍了通过CSS的狭缝线效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有人知道在CSS中创建其中一行(参考图像)的方法吗?

解决方法

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

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

另一个,稍微暗一点:@L_301_1@

HTML:

  1. <div id="container">
  2. <div id="overhang"></div>
  3. <div id="falloff-shadow"></div>
  4. </div>

CSS:

  1. #container {
  2. background: #5A5A5A;
  3. width: 700px;
  4. padding: 200px 0 80px 0px;
  5. }
  6. #overhang {
  7. background: #5A5A5A;
  8. border-top: 1px solid #666;
  9. height: 80px;
  10. width: 600px;
  11. margin: 0 auto;
  12. position: relative;
  13. z-index: 5;
  14. }
  15. #falloff-shadow {
  16. width: 500px;
  17. margin: 0 auto;
  18. -webkit-Box-shadow: 0px 5px 50px 5px rgba(0,1);
  19. -moz-Box-shadow: 0px 5px 50px 5px rgba(0,1);
  20. Box-shadow: 0px 5px 50px 5px rgba(0,1);
  21. position: relative;
  22. z-index: 1;
  23. height: 1px;
  24. top: -65px;
  25. }

猜你在找的CSS相关文章