边框颜色到标题，而不影响身体

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; 
    } 

我希望这会有所帮助。