如何在CSS中创建此框(请参阅我的图片)？

Question

在我的div箱子我有一个body和header组成部分.我想给这个header部分一个单独的边框,它必须位于div框内,并且不能有任何填充.完全应该看起来像我给出的图像:

这是我尝试过的:

HTML:

    <div id="story">
    <p>

    Story Header

    </p>
    story body.
   </div>

.CSS:

#story{

    border: 1px solid blue;
    padding:10px;

}
#story p{
    border: 1px solid blue;
    background-color:black;
    color:white;
}

在这里看到: 演示

Answer 1

你可以在标题上使用负边距..

#story{
    
    border: 1px solid blue;
    padding:10px;
    
}
#story p{
    border: 1px solid green;
    background-color:black;
    color:white;
    padding: 10px;
    margin: -11px -11px 10px -11px;
}

<div id="story">
    <p>
    Story Header     
    </p>
    story body.
</div>

JSFiddle版本