Fancy fieldset legend

Question

我想html'ify一個設計，其中一個視頻有一個邊框，並在邊框上的標題。完成這個任務的最好方法是使用fieldset和legand標記，但是，我需要對樣式感興趣，任何人都有如何完成這個任務的想法，同時保持與ie7 +，firefox和chrome的兼容性？

名人堂1：

2幀：

Answer 1

你可以做這樣的事情 - DEMO

HTML

<div class="wrapper"> 
    <div class="content"> 
     <h2> Some lorem ipsum text title </h2> 
    </div> 
</div> 

CSS

.wrapper { 
    margin: 25px; 
    background: #000; 
    height: 300px; 
    padding: 5%; 
} 

.content { 
    border: 1px solid #fff; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    text-align: center; 
} 

h2 { 
    color: yellow; 
    font: bold 16px sans-serif; 
    display: inline-block; 
    padding: 0 25px; 
    position: relative; 
    top: -12px; 
    background: #000; 
}