边框中的文本CSS HTML

我想要一个像这样的div：

---

这可以用HTML+CSS实现吗？我还将使用jQuery设置这个div的动画。当div被隐藏时，我希望显示标题和顶行。

您可以这样做，在

h1

上设置负

边距（或使用的任何标题）

注意：您需要在
h1

例如：


编辑

要使其能够隐藏
div
，可以使用如下jQuery

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

（您需要修改…）

示例2:
可以使用图例标记。
请参阅是，但它不是
div
，而是
字段集


字段集{
边框：1px实心#000；
}

AAA
我知道参加聚会有点晚，但我觉得答案需要更多的调查/投入。
我在没有使用fieldset标记的情况下成功地创建了这种情况——不管怎么说，这是错误的，因为如果我不在表单中，那么这不是我真正应该做的


/*样式在这里*/
#信息块部分{
边框：2件纯黑；
}
.file marker>div{
填充：0 3px；
高度：100px；
边缘顶部：-0.8em；
}
.方框标题{
背景：白色无重复滚动0；
显示：内联块；
填充：0.2px；
左边距：8em；
}

审计跟踪
您可以使用字段集标记



个性化：
名称：

电子邮件：

出生日期:


你的头衔

洛雷姆·伊普苏姆·多洛尔·希特（Lorem ipsum dolor sit amet）在洛雷姆·普利埃·梅（Lorem propriae mei）是一位改革派。这是一个普通人的名字，名字是Diam consetetur。

边框中的文本与透明文本背景

.box{
背景图像：url（“https://i.stack.imgur.com/N39wV.jpg");
宽度：350px；
填充：10px；
}
/*开始第一个方框*/
.首先{
宽度：300px；
高度：100px；
利润率：10px；
边框宽度：0 2px 0 2px；
边框颜色：#333；
边框样式：实心；
位置：相对位置；
}
.第一跨{
位置：绝对位置；
显示器：flex；
右：0；
左：0；
对齐项目：居中；
}
.首先，富{
顶部：-8px；
}
.第一，酒吧{
底部：-8.5px；
}
.第一档：之前{
右边距：15px；
}
.第一档：之后{
左边距：15px；
}
.第一个span:之前，.第一个span:之后{
内容：''；
高度：2倍；
背景：#333；
显示：块；
宽度：50%；
}
/*开始第二个方框*/
.第二{
宽度：300px；
高度：100px；
利润率：10px；
边框宽度：2px0 2px0；
边框颜色：#333；
边框样式：实心；
位置：相对位置；
}
.第二档{
位置：绝对位置；
排名：0；
底部：0；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.second.foo{
左：-15px；
}
.第二，酒吧{
右：-15.5px；
}
.第二段：之前{
边缘底部：15px；
}
.第二段：之后{
边缘顶部：15px；
}
.second span:之前，.second span:之后{
内容：''；
宽度：2倍；
背景：#333；
显示：块；
身高：50%；
}

福
酒吧


福
酒吧
对于a，这里是另一个带有转换的选项，没有字段集（副本中需要圆角边框）：

位置或变换也可以帮助您：


*{
保证金：0；
填充：0；
框大小：边框框；
}
.字段集{
边框：实心；
颜色：š353fff；
边界半径：1米；
利润率：2米1米1米；
填充：0 1em 1em；
}
.传奇{
转化：translatey（-50%）；
宽度：最大含量；
背景：白色；
填充：0.15em；
}
李菲德{
列表样式类型：“-”；
}

一些头衔

项目
项目
项目
项目

fieldset

和

legend

标记不是HTML5，它们仍然存在于HTML5中，所以从技术上讲。。。它们是HTML 5标记。：）我只是想澄清这一点，我认为称之为HTML5是正确的，因为自HTML4.01以来，接口发生了变化。HTML5图例界面已经淘汰了accessKey和align属性，而在HTML4.01中，它们只是不推荐使用。所以有一个区别。正如我说的，那些标签不是HTML5，那些标签是HTML。这些标签并不是HTML5独有的标签，比如

audio

is。Link已经失效：（你可以做一个变通方法……而且，你应该对此发表评论，而不是将其作为答案发布。我不明白为什么它是一个变通方法，对我来说它是一个解决方案。它是一个div还是一个fieldset有什么功能上的区别？@bazz-这是错误的语义。“fieldset元素表示一组表单控件，这些控件可以选择按公共名称分组。"-HTML5规范。控件在哪里？我们实际上需要的是一个

显示：字段集

CSS设置。遗憾的是没有。哇，对不起。我以为你在评论我的答案。Nevermind@Alohci同意！不过，我不认为OP说字段集中不会有任何表单控件。他可能还是想把表单控件放在我的位置上nside:）我不喜欢这个答案，它有很多限制：上边距与h1的字体大小有关，如果字体大小以后发生变化，您需要更新所有的边距。背景：白色可防止任何背景图像通过h1可见，感觉有点僵硬。我只是有一种感觉，使用这种方法就像为以后更多的样式问题敞开了大门。只是我的想法，我喜欢这个。当内部的div被隐藏时，有没有办法隐藏侧边和底边？我问的是如何保持顶部边界并隐藏其他三个边界，但我决定不这样做。这就是我的结论：如果有人试图将此页面打印为浏览器，您将遇到问题

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