邊框文本 CSS HTML
[英]Text in Border CSS HTML
問題描述
我想要一個看起來像這樣的 div：
這可能與 HTML + CSS 有關嗎？ 我還將使用 jQuery 為這個 div 設置動畫。 當 div 被隱藏時，我希望顯示標題和頂行。
10 個解決方案
解決方案1
106 2011-10-11 19:23:06
是的，但它不是一個div ，它是一個fieldset
fieldset { border: 1px solid #000; }
<fieldset> <legend>AAA</legend> </fieldset>
解決方案2
58 已采納 2011-10-11 19:22:38
你可以做這樣的事情，你在h1 （或你正在使用的任何標題）上設置一個負margin
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
注意：您需要在h1上設置background和width
示例： http : //jsfiddle.net/ZgEMM/
編輯
為了讓它隱藏div ，你可以使用一些像這樣的 jQuery
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
（您將需要修改...）
示例#2： http : //jsfiddle.net/ZgEMM/4/
解決方案3
15 2016-05-03 13:44:54
我知道聚會有點晚了，但是我覺得答案可以通過更多的調查/投入來解決。 我設法在不使用 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>
這可以在這個 plunk 中查看：
這樣做的效果如下：
不使用字段集。
如果 CSS 僅使用一些填充來創建效果，則使用最少。
使用“em”邊距頂部創建字體相關標題。
使用 display inline-block 實現文本周圍的自然寬度。
無論如何，我希望對未來的造型師有所幫助，你永遠不知道。
解決方案4
9 2019-07-30 20:10:51
帶有透明文本背景的邊框中的文本
.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
您可以使用字段集標記。
<!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form> </body> </html>
檢查此鏈接： HTML 標簽
解決方案7
1 2020-08-10 19:40:04
對於副本，這里是另一個帶有轉換的選項，沒有字段集（副本中需要圓形邊框） ：
位置或變換也可以幫助您：
* { 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
如果你不在一個 position 中添加一個字段集，你可以給元素添加一個背景。 在我的情況下，我在輸入元素和輸入元素之外有不同的 colors，並且輸入元素的顏色為 hover。 所以這是一個修復，我添加了線性漸變背景，上半部分為外部顏色，下半部分為透明顏色。 我在下半部分添加了透明顏色，以便在懸停時看到 hover 顏色。
.class-name {
background: linear-gradient(to bottom, #2a2b2d 50%, transparent 50%);
}
解決方案9
0 2022-09-26 19:55:18
從實際的角度來看，我認為 PeterS 給出了最好的答案。 它也以非常清晰的教學風格呈現。
只是為了節省其他人幾分鍾將其轉換為更多生產風格的代碼，我已經完成了以下操作。 基本上，這就是您認為您需要的：一個 div 框在另一個框內，外部 div 框提供邊框，內部提供標題內容，負邊距將其向上移動。 然后第三個 div 包含實際內容。
這是 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; }
這是 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
可以使用圖例標簽。 參考http://www.w3schools.com/html5/tag_legend.asp
帶邊框的透明文本 html/css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.