我想要像我附加的jpeg一样的边框样式。我的边界上下起伏。我想像这个图像合并边框

Question

I am doing psd to html for this using bootstrap 3. I want same styles for borders. my problem is when I am giving border to container it is coming above that navigation active class border. My English is weak. It would be great if you can help me.

Answer 1

.container-fluid.nav-bg {
    background: #BFDFDE none repeat scroll 0% 0%;
}
.container > .navbar-header
{
margin-right: 0px;
margin-left: 0px;
text-align: center;
}
.navbar-nav {
    float: none;
    margin: 0px;
    display: inline-block;
}
.navbar-nav > li {
    float: left;
}
.nav > li {
    position: relative;
    display: block;
}
.nav > li:hover:before,
.active:before {
    content:"";
    position:absolute;
    top:-2px;
    left:0;
    width:100%;
    height:2px;
    background:#D15962;
}

.navbar-toggle {
  display:none;  
}

<div class="container-fluid nav-bg">
    	<div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav navbar-center">
                    <li class="active"><a href="#" target="_blank">HOME <span> | </span></a></li>
                    <li><a href="#" target="_blank">ABOUT US <span> | </span></a></li>
                    <li><a href="#" target="_blank">SERVICES <span> | </span></a></li>
                    <li><a href="#" target="_blank">GALLERY <span> | </span></a></li>
                    <li><a href="#" target="_blank">CONTACT US <span> | </span></a></li>
                    </ul>
     
    			</div><!-- /.navbar-collapse -->
              </div>
    </div>

结果：

Answer 2

只是添加风格可能会帮助你

.navbar-nav > li 
{
border-top: 3px solid rgba(0, 0, 0, 0);
}
.active 
{
border-top: 3px solid #d15962 !important;
}

Answer 3

用于此css并获得与您一样的结果。

我只是修改你的css文件，就像这样

＆＃13;

＆＃13;

.container-fluid.nav-bg {
    background: #BFDFDE none repeat scroll 0% 0%;
}
.container > .navbar-header
{
margin-right: 0px;
margin-left: 0px;
text-align: center;
}
.navbar-nav {
    float: none;
    margin: 0px;
    display: block;
    margin:0 50px;
    text-align:center;
    border-top:solid 3px blue;
}

.nav > li {
    position: relative;
    display: inline-block;
}
.nav > li.active:after, .nav > li:hover:after{
    content:"";
    border-top: 3px solid #D15962;
    position:absolute;
    left:0;
    right:0;
    top:-3px;
}

＆＃13;

<div class="container-fluid nav-bg">
    	<div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav navbar-center">
                    <li class="active"><a href="#" target="_blank">HOME <span> | </span></a></li>
                    <li><a href="#" target="_blank">ABOUT US <span> | </span></a></li>
                    <li><a href="#" target="_blank">SERVICES <span> | </span></a></li>
                    <li><a href="#" target="_blank">GALLERY <span> | </span></a></li>
                    <li><a href="#" target="_blank">CONTACT US <span> | </span></a></li>
                    </ul>
     
    			</div><!-- /.navbar-collapse -->
              </div>
    </div>

＆＃13;

＆＃13;

＆＃13;