有人知道在CSS中创建其中一行(参考图像)的方法吗?
解决方法
这是一个粗略的近似开始.您需要调整细节.基本上我所做的就是创建一个悬垂div,在它下面是一个div,它会在末端产生一个带有衰减的阴影.悬伸div位于较高层,因此您只能看到阴影的边缘.
另一个,稍微暗一点:@L_301_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;
- }