边框文本 CSS HTML
[英]Text in Border CSS HTML
问题描述
I'd like to have a div that looks like this:
我想要一个看起来像这样的 div：
Is this possible to do with HTML + CSS?这可能与 HTML + CSS 有关吗？ I will also be animating this div with jQuery.我还将使用 jQuery 为这个 div 设置动画。 When the div is hidden I would like the title and the top line to show.当 div 被隐藏时，我希望显示标题和顶行。
10 个解决方案
解决方案1
106 2011-10-11 19:23:06
Yes, but it's not a div , it's a fieldset是的，但它不是一个div ，它是一个fieldset
fieldset { border: 1px solid #000; }
<fieldset> <legend>AAA</legend> </fieldset>
解决方案2
58 已采纳 2011-10-11 19:22:38
You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)你可以做这样的事情，你在h1 （或你正在使用的任何标题）上设置一个负margin
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Note: you need to set a background as well as a width on the h1注意：您需要在h1上设置background和width
Example: http://jsfiddle.net/ZgEMM/示例： http : //jsfiddle.net/ZgEMM/
EDIT编辑
To make it work with hiding the div , you could use some jQuery like this为了让它隐藏div ，你可以使用一些像这样的 jQuery
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(You will need to modify...) （您将需要修改...）
Example #2: http://jsfiddle.net/ZgEMM/4/示例#2： http : //jsfiddle.net/ZgEMM/4/
解决方案3
15 2016-05-03 13:44:54
I know a bit late to the party, however I feel the answers could do with some more investigation/input.我知道聚会有点晚了，但是我觉得答案可以通过更多的调查/投入来解决。 I have managed to create the situation without using the fieldset tag - that is wrong anyway as if I'm not in a form then that isn't really what I should be doing.我设法在不使用 fieldset 标签的情况下创造了这种情况 - 无论如何这都是错误的，好像我不在表单中那样，那并不是我真正应该做的。
/* Styles go here */ #info-block section { border: 2px solid black; } .file-marker > div { padding: 0 3px; height: 100px; margin-top: -0.8em; } .box-title { background: white none repeat scroll 0 0; display: inline-block; padding: 0 2px; margin-left: 8em; }
<aside id="info-block"> <section class="file-marker"> <div> <div class="box-title"> Audit Trail </div> <div class="box-contents"> <div id="audit-trail"> </div> </div> </div> </section> </aside>
This can be viewed in this plunk:这可以在这个 plunk 中查看：
What this achieves is the following:这样做的效果如下：
no use of fieldsets.
不使用字段集。minimal use if CSS to create effect with just some paddings.
如果 CSS 仅使用一些填充来创建效果，则使用最少。Use of "em" margin top to create font relative title.
使用“em”边距顶部创建字体相关标题。use of display inline-block to achieve natural width around the text.
使用 display inline-block 实现文本周围的自然宽度。
Anyway I hope that helps future stylers, you never know.无论如何，我希望对未来的造型师有所帮助，你永远不知道。
解决方案4
9 2019-07-30 20:10:51
Text in Border with transparent text background带有透明文本背景的边框中的文本
.box{ background-image: url("https://i.stack.imgur.com/N39wV.jpg"); width: 350px; padding: 10px; } /*begin first box*/ .first{ width: 300px; height: 100px; margin: 10px; border-width: 0 2px 0 2px; border-color: #333; border-style: solid; position: relative; } .first span { position: absolute; display: flex; right: 0; left: 0; align-items: center; } .first .foo{ top: -8px; } .first .bar{ bottom: -8.5px; } .first span:before{ margin-right: 15px; } .first span:after { margin-left: 15px; } .first span:before , .first span:after { content: ' '; height: 2px; background: #333; display: block; width: 50%; } /*begin second box*/ .second{ width: 300px; height: 100px; margin: 10px; border-width: 2px 0 2px 0; border-color: #333; border-style: solid; position: relative; } .second span { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; } .second .foo{ left: -15px; } .second .bar{ right: -15.5px; } .second span:before{ margin-bottom: 15px; } .second span:after { margin-top: 15px; } .second span:before , .second span:after { content: ' '; width: 2px; background: #333; display: block; height: 50%; }
<div class="box"> <div class="first"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> <br> <div class="second"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> </div>
解决方案5
7 2019-07-29 03:19:17
<fieldset> <legend> YOUR TITLE </legend> <p> Lorem ipsum dolor sit amet, est et illum reformidans, at lorem propriae mei. Qui legere commodo mediocritatem no. Diam consetetur. </p> </fieldset>
解决方案6
4 2016-09-17 07:57:56
解决方案7
1 2020-08-10 19:40:04
For a duplicate , here another option with transform, no fieldset ( and rounded border required in the duplicates) :对于副本，这里是另一个带有转换的选项，没有字段集（副本中需要圆形边框） ：
position or transform can help you too :
* { margin: 0; padding:0; box-sizing:border-box; } .fieldset { border: solid; color: #353fff; border-radius: 1em; margin: 2em 1em 1em; padding:0 1em 1em; } .legend { transform: translatey(-50%); width: max-content; background: white; padding: 0 0.15em; } .fieldset li { list-style-type: " - "; }<div class="fieldset"> <h1 class="legend">Some Title</h1> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div>
解决方案8
0 2022-05-10 09:19:45
If you are not in a position to add a field set, you can add a background to the element.如果你不在一个 position 中添加一个字段集，你可以给元素添加一个背景。 In my situation, I had different colors in the input element and outside the input element, and also we have a hover color for the input element.在我的情况下，我在输入元素和输入元素之外有不同的 colors，并且输入元素的颜色为 hover。 So this is a fix I added linear-gradient background with outside color in the top half and transparent color in the bottom half.所以这是一个修复，我添加了线性渐变背景，上半部分为外部颜色，下半部分为透明颜色。 I added the transparent color to the bottom half inorder to see the hover color when hovered.我在下半部分添加了透明颜色，以便在悬停时看到 hover 颜色。
.class-name {
background: linear-gradient(to bottom, #2a2b2d 50%, transparent 50%);
}
解决方案9
0 2022-09-26 19:55:18
From a practical perspective, I think PeterS has the best answer.从实际的角度来看，我认为 PeterS 给出了最好的答案。 It's also presented in a very clear, didactical style.它也以非常清晰的教学风格呈现。
Just to save others a few minutes converting it into more production-style code, I've done the following.只是为了节省其他人几分钟将其转换为更多生产风格的代码，我已经完成了以下操作。 Basically, it's what you would think you need: One div box inside another, with the outer div box providing the border, the inner providing the title contents with a negative margin shifting it up.基本上，这就是您认为您需要的：一个 div 框在另一个框内，外部 div 框提供边框，内部提供标题内容，负边距将其向上移动。 A third div then contains the actual content.然后第三个 div 包含实际内容。
This is the CSS:这是 CSS：
.outer-border-box {
border: 2px solid black; border-top:3px solid black;}
.label-source-box {
padding: 0 3px; height: 100px; margin-top: -0.8em; }
.box-title {
background: white none repeat scroll 0 0;
padding: 0 2px;
margin-left: 4em;
font-weight:700; font-size:18px;
font-family: 'Avenir Next',Helvetica, sans-serif; }
This is the html:这是 html：
<div class="outer-border-box">
<div class="label-source-box">
<span class="box-title">Promotional </span>
<div class="box-contents">
<h2>this is the contents</h2>
</div> </div> </div>
解决方案10
-1 2011-10-11 19:22:41
It is possible by using the legend tag.可以使用图例标签。 Refer to http://www.w3schools.com/html5/tag_legend.asp参考http://www.w3schools.com/html5/tag_legend.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.