花哨的字段集图例

【问题标题】：Fancy fieldset legend花哨的字段集图例
【发布时间】：2012-09-13 08:13:57
【问题描述】：

我正在尝试 html'ify 一个设计，其中视频周围有一个边框，并且在边框上有一个标题。实现这一点的完美方法是使用 fieldset 和 legand 标签，但是，我需要对样式有所了解，任何人都知道如何实现这一点，同时保持与 ie7+、firefox 和 chrome 的兼容性？？

名声1：

第 2 帧：

【问题讨论】：

<fieldset> 标签在这种情况下语义上是一个非常糟糕的解决方案
^ 同意，只是想不出另一种方法来让标签越过边框并在标签期间使边框变得透明。

标签： css legend fieldset legend-properties

【解决方案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;
}

【讨论】：