CSS（3）和HTML前沿技术

Question

这个问题已经被问过了，但我需要用不同的方式来表述。请看下面的图片，以查看我试图实现的导航栏：

问题：

- 边缘周围有阴影 - 导航栏内的文本/图像 - 周围有1像素的实线边框将是很好的

当然，静态图片可以做到这一点，但我想使用其他东西。你有什么想法，如何做到这一点（尽可能具有浏览器支持）？

编辑：

是绝对定位的

以下是我到目前为止所做的：

但无法应用边框，而且固定的大小也有问题。

    nav {
       float: left;
       position: absolute;
       background-color: #ffffff;
       top: 0;
       left: 0;
       display: inline;
       padding: 12px;
       padding-right: 0;
       width: auto;
    }

    .behind_nav {
       height: 60px;
       width: 523px;
       position: absolute;
       top: 0;
       left: 0;
       border-right: 20px solid transparent;
       border-top: 48px solid white;
    }

.behind_nav 位于 <nav> 后面（惊喜吧）。实际上，这很好用，除了上面提到的阴影和边框问题。此外，它绑定了一个固定值，这是有问题的。<nav> 的宽度适应内容（可能因 CMS 数据/浏览器而异）。

- paulgavrikov

---

现有的回答已经非常好了，而且提问也有相当长的时间了，但你也可以看一下这个答案，它提供了不同的方法（需要进行适当修改以适应这个问题）。 - Harry

Answer 1

粗略演示：http://jsfiddle.net/W82UV/3/ 我认为这个演示涵盖了你困难的关键点，即边缘倾斜、投影和边框。

<div id="top">
    The top bar
</div>
<div id="container">
    <div id="background">        
    </div>
    <nav>
        Test
    </nav>
</div>

#top{  
    background-color: #f0f0f0;
    border-bottom: 1px solid #555;
    box-shadow: 8px 8px 8px #aaa;
}

#container {
    position: relative;
    top: -1px;
    overflow: hidden;
    height: 96px;
}

#background {
    background-color: #f0f0f0;

    position: absolute;
    top: -1px;
    left: -32px;
    border: 1px solid #555;

    width: 400px;
    height: 64px;
    box-shadow: 8px 8px 8px #aaa;

   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   -ms-transform: skew(-20deg); 
   transform: skew(-20deg);
}

在IE 8（不会偏移），9，10，FF和Chrome中进行了测试。请注意，为了最终解决方案更清晰（更好的类名和/或ID），我可能会重新排列标记，并使所有内容成比例地定位。

- Tim M.

---

这确实是一个好的解决方案，我已经进行了一些测试。我只是想寻找比CSS3更受支持的解决方案。无论如何，如果我们找不到其他解决方案，我将把它标记为解决方案。 - paulgavrikov

哦...我忘记了你可以使用 skew! 真巧妙。不过，除了CSS3或静态图像，我认为你不会得到其他任何东西。无论如何，祝你好运！ - Orteil

关于-ms前缀的建议不错（可能还有其他前缀遗漏了...只是试图找到一个大致可行的解决方案）。稍作调整后，我认为这个方案可以在IE9+和所有其他现代浏览器中得到支持。 - Tim M.

IE8是这里唯一的真正问题（如果你想支持它，还有7）。然而，没有倾斜也不难看；只是更“盒状”。 - Tim M.

恭喜你达到了2万（几乎！）的成就，非常棒的解决方案！ - Wesley Murch

Answer 2

似乎边缘的静态图像是唯一的选择（除非您想变得更加技术化并使用画布，但那会很傻）。您可以通过旋转块来获得倾斜的边缘，但会遇到阴影问题。然而，栏内的文本似乎不是问题-请参考，这些导航栏通常作为平面列表实现。

抱歉我帮不上更多的忙！

- Orteil

---

我可以将边缘作为单独的图像（包括边框和阴影），但如果可能的话，我想尝试其他方法。 - paulgavrikov

这就是向后兼容的代价... 你不能向那些缺乏条件的孩子们展示你酷炫的新玩意儿。 - Orteil