纯CSS实现类winForm的分组控件效果

效果图片

代码

<div class="group">
    <div class="over">用户评论</div>
</div>

.group{
    width: 400px;height: 150px;border: 1px solid silver;margin: 15px auto;position: relative;
    /*position:relative是必须的，在此，否则可能影响'用户评论'的布局*/
}
.over{
    /*非常重要的属性设置：
    * z-index:1(用于同级覆盖，父子级别的不用);
    * background-color: white;默认为透明，透明就无法覆盖横线了。
    * position: absolute;方便定位。
    */
    z-index:1;position: absolute;top: -8px;left: 40px;background-color: white;
    width: 75px;height: 20px;padding-left: 5px;
}