花式字段集图例

时间:2012-09-20 21:55:53

标签: css legend fieldset legend-properties

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

成名1: Desired look of one frame

第2帧: Desired look of second frame

1 个答案:

答案 0 :(得分:2)

您可以执行以下操作 - 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;
}