边框 CSS HTML 中的文本

Question

我想要一个看起来像这样的 div：

这可能与HTML + CSS有关吗？我还将使用 jQuery 为这个 div 设置动画。当 div 被隐藏时，我希望显示标题和顶行。

原文由 Alex Bliskovsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以执行类似的操作，在 h1 （或您使用的任何标题）上设置负数 margin

 div{
    height:100px;
    width:100px;
    border:2px solid black;
}

h1{
    width:30px;
    margin-top:-10px;
    margin-left:5px;
    background:white;
}

注意：您需要在 --- 上设置 background 以及 width h1

示例：http: //jsfiddle.net/ZgEMM/

---

编辑

为了使它与隐藏 div 一起工作，你可以使用一些像这样的 jQuery

 $('a').click(function(){
    var a = $('h1').detach();
    $('div').hide();
    $(a).prependTo('body');
});

（您将需要修改…）

示例 #2：http: //jsfiddle.net/ZgEMM/4/

原文由 Jason Gennaro 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

是的，但它不是 div ，它是 fieldset

 fieldset {
    border: 1px solid #000;
}

 <fieldset>
  <legend>AAA</legend>
</fieldset>

原文由 Bazzz 发布，翻译遵循 CC BY-SA 4.0 许可协议