Bootstrap 顶部边框（右上方）底部边框

Question

如何在边框顶部放置边框？我的标题的一部分是横幅，另一个是底部边框与横幅混合的文本。有一种不同的颜色阴影我想在我创建的边框顶部制作一条 1px 实线。是否可以在边框顶部放置边框？

<div class="navbar navbar-default mega-menu" role="navigation">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <div class="row">
                            <div class="col-md-10">
                                <a href="#"><img id="logo-header" class="header-banner img-responsive" src="assets/img/ptaximg/topgraphicptax.jpg" width="1000" alt=""></a>
                            </div>
                           <div id="border" class="col-md-2">
                                <!--<a class="navbar-brand" href="index.html">
                                    <img src="assets/img/ptaximg/ptax-logo_sm.jpg" alt="Logo">-->
                                <a class="navbar-brand" href="http://www.pacificbluesoftware.com/">
                                    <img src="assets/img/ptaximg/ptax-logo_sm.jpg">
                                    <p class="powered_by text-center">Powered by</p>
                                    <p class="powered_by text-center"><strong>Pacific Blue Software, Inc.</strong></p>
                                </a>
                            </div>
                        </div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="full-width-menu">Menu Bar</span>
                            <span class="icon-toggle">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </span>
                        </button>
                    </div>
                </div>

#border{
    border-bottom: solid 27px #296488;
    margin-left: -15px;
}

我试图在这个边界上方放置一个 1px 的边框，我创建了border-bottom:solid 27px #296488;

Answer 1

您可以使用box-shadow 来创建这样的双边框：

#border{
    border-bottom: solid 27px #296488;
    box-shadow: inset 0 -10px 1px -10px red;
}

Answer 2

使用 :after 和 :before 类试试这个：

	  #border{
		  position: relative;
    border-bottom: solid 20px #296488;
    margin-left: -15px;
}
	  #border:before{
		  content: " ";
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: -22px;
  border-bottom: 10px solid #ffea00;
		  
	  }

<div class="navbar navbar-default mega-menu" role="navigation">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <div class="row">
                            <div class="col-md-10">
                                <a href="#"><img id="logo-header" class="header-banner img-responsive" src="assets/img/ptaximg/topgraphicptax.jpg" width="1000" alt=""></a>
                            </div>
                           <div id="border" class="col-md-2">
                                <!--<a class="navbar-brand" href="index.html">
                                    <img src="assets/img/ptaximg/ptax-logo_sm.jpg" alt="Logo">-->
                                <a class="navbar-brand" href="http://www.pacificbluesoftware.com/">
                                    <img src="assets/img/ptaximg/ptax-logo_sm.jpg">
                                    <p class="powered_by text-center">Powered by</p>
                                    <p class="powered_by text-center"><strong>Pacific Blue Software, Inc.</strong></p>
                                </a>
                            </div>
                        </div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="full-width-menu">Menu Bar</span>
                            <span class="icon-toggle">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </span>
                        </button>
                    </div>
                </div>

显然它是 Bootstrap，所以它看起来并不神奇。