通过CSS的狭缝线效果[关闭]答案

【问题标题】：Slit line effect via CSS [closed]通过CSS的狭缝线效果[关闭]
【发布时间】：2012-01-19 11:44:45
【问题描述】：

有人知道在 CSS 中创建这些行（参考图片）的方法吗？

【问题讨论】：

为什么这个问题被关闭了？

标签： css

【解决方案1】：

这是一个粗略的近似值。您需要调整细节。基本上我所做的是创建一个悬垂的 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, 0, 0, 1);
      -moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
      box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
      position: relative;
      z-index: 1;
      height: 1px;
      top: -65px;
    }

【讨论】：

谢谢！我试图找出让两端阴影衰减的最佳方法。
这就是为什么，虽然我不认为 css 是一门语言，但我尊重它（也喜欢它）。因为您可以通过不同的途径达到相同的目标，每一种途径都是独特而有创意的。
+1 不错，从没想过你可以用 css 让它看起来这么好

【解决方案2】：

是的，您可以在 css3 中创建它。你必须结合一些效果，但我认为一条灰色的线（你必须在下面添加一些额外的空间，稍后解释）和阴影就可以了。

要编写仅出现在一侧（顶部）的阴影，请检查此问题/答案：How can I add a box-shadow on one side of an element?

基于该示例，您可以尝试以下操作：

.myDiv
{
    width: 700px;
    height: 50px;
    border-top: 2px solid #333;
    -webkit-box-shadow: 10px 0px 0px -2px #888 ;
}

阴影仍然存在于左侧，但已隐藏（-2px）。这给了你一个单一阴影的错觉。这只是一个初创公司，尝试不同的选择，如果您有任何特定问题，请回来。但请先自己动手。

【讨论】：