html - 双色导航栏固定顶部 Bootstrap

Question

我想重新创建这张图片:

在使用 Bootstrap 的 navbar-fixed-top 中，目前我已经添加了这个自定义 CSS:

navbar-fixed-top.css

.navbar {
    background-color: #8CB5A0;
    background-image: none;
}

这是导航栏的 Bootstrap 代码:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only"> Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project Name</a>   
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

这是CSS:

但是我如何添加双红色边框，因为有两种类型的红色，或者更好的是我可以直接添加图像作为背景？

Answer 1

这是一个更好的选择，使用 box-shadow

Double border