2或3行邊框在html，css，bootstrap

Question

我想在div或表頭上創建2/3行彩色邊框。 我需要喜歡這幅畫這種類型的結構相同，以相同的

使用HTML，CSS和引導。 我不能這樣做，請有人幫忙！

Answer 1

下面是如何做到這一點的方法：

/*-- Style example 1 --*/ 
 
.container{ 
 
    background-color: #DFBA8A; 
 
    display: inline-block; 
 
    border: 5px solid #8ECE8E; 
 
    padding: 5px; 
 
} 
 

 
.inner{ 
 
    border: 5px solid #CACE8E; 
 
    background-color: #BBBF00 ; 
 
} 
 

 
h1{ 
 
    color: #FFF; 
 
    text-align: center; 
 
    margin: 15px 20px; 
 
} 
 

 
/*-- Style example 2 --*/ 
 
.container-2{ 
 
    margin-top: 10px; 
 
    background-color: #BBBF00; 
 
    display: inline-block; 
 
    padding: 6px; 
 
} 
 

 
.inner-2{ 
 
    border: 5px solid #CACE8E; 
 
} 
 

 
h1{ 
 
    color: #FFF; 
 
    text-align: center; 
 
    margin: 15px 20px; 
 
}

<!-- Example 1 --> 
 
<div class="container"> 
 
    <div class="inner"> 
 
    <h1>WE ARE THE SKOOL</h1> 
 
    </div> 
 
</div> 
 

 
<!-- Example 2 --> 
 
<div class="container-2"> 
 
    <div class="inner-2"> 
 
    <h1>WE ARE THE SKOOL</h1> 
 
    </div> 
 
</div>

是這樣 你想要什麼？

Answer 2

.main{background-color:#FFCC66;color:white;font-size:20pt;border: 4px solid #CC6600;outline: 3px solid #996633; width:100px}

<div class="main">SKOOL</div>

See an example here