5

这已经被问过了，但我需要以不同的方式。请查看下图以查看我尝试实现的导航栏：

导航

问题：

  • 边缘周围的阴影
  • 栏内的文字/图像
  • 图形周围的 1px 实心边框会很棒

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

编辑： <nav>绝对定位

这是我到目前为止所做的

导航栏进度

但是不可能应用边框，固定大小也有问题。

    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 数据/浏览器而异）

4

2 回答 2

8

粗略演示：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），并按比例放置所有内容。

于 2013-03-04T02:33:17.113 回答
1

看起来边缘的静态图像将是唯一的方法（除非您想获得技术并使用画布，但这会很愚蠢）。您可以使用旋转块获得有角度的边缘，但您会遇到阴影问题。不过，栏中的文本似乎不是问题 - 作为参考，这些导航栏通常实现为平面列表。

对不起，我不能提供更多帮助！

于 2013-03-04T02:19:35.400 回答