邊框顏色到標題，而不影響身體

Question

入住這fiddle

我想知道我怎麼可以添加一個邊框頭不影響身體，反之亦然。

.content-box { 
 
    border: 1px solid #cfcfcf; 
 
    background: #ebebeb; 
 
} 
 

 
.content-box-header { 
 
    background: #202020; 
 
    color: #fff; 
 
    padding: 5px; 
 
}

<div id="content" style="max-width: 330px;"> 
 
    <div class="content-box"> 
 
    <div class="content-box-header"> 
 
     Chocolate Bar 
 
    </div> 
 
    <ul> 
 
     <li>PHP</li> 
 
     <li>HTML</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

我會把它分成更多的部分。下面我將它分解爲標題，正文和內容框。從這裏，只需將一個邊框分配給身體，另一個邊框分配給標題。從整個家長中刪除邊框定義應該修復它。

.cbox-body { 
 
    background: #ebebeb; 
 
    border: 1px solid #cfcfcf; 
 
} 
 
.content-box-header { 
 
    background: #202020; 
 
    border: 1px solid red; 
 
    color: #fff; 
 
    padding: 5px; 
 
} 
 
#content{ 
 
    max-width:330px; 
 
}

<div id="content"> 
 
    <div class="content-box"> 
 
    <div class="content-box-header"> 
 
     <p>Chocolate Bar</p> 
 
    </div> 
 
    <div class="cbox-body"> 
 
     <ul> 
 
     <li>PHP</li> 
 
     <li>HTML</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

只需使用頭類邊界，

.content-box { 
     background: #ebebeb; 
     border: 1px solid #cfcfcf; 
    } 

    .content-box-header { 
     border: 1px solid #colorcode; 
     background: #202020; 
     color: #fff; 
     padding: 5px; 
    } 

我希望這會有所幫助。