css 边框上如何写入文字?
发布网友
发布时间：2022-04-23 05:33
共6个回答
懂视网
时间：2022-05-12 17:56
CSS实现文本周围插入内容的方案
本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点。
常见设计稿要求
在文本前、后、上、下插入图标、线条、三角形、圆形
插入的元素要和文本实现间距、对齐（居中、顶部、基线）等位置关系。
理伦知识
灵活使用display、background等属性
通过:before和:after配合content属性来实现插入内容。
通过absolute、vertical、margin、line-height等属性实现文本与符号位置关系。
能够使用CSS属性画出的图形则用CSS属性，否则用background属性显示背景图片
实践操作
解法一：改变HTML结构，通过在文本元素前或后增加标签如<span></span>和<i></i>
解法二：直接使用伪元素:before和:after（Ie7以下不支持）
必须有content属性
插入的元素的是内联元素，需要显示地定义为块级元素，才能设置高度，填充，边距等
线条
html
<div class="article-block-title"> <h2 class="title"> <span>前端技术</span><i>前端技术前端技术</i> </h2> </div>
css
.article-block-title {
height: 44px;
/*实现文本与竖线对齐*/
line-height: 44px;
border-left: 3px solid #72b16a;
padding-left: 20px;
}分析
直接利用该文本的容器使用border-left、border-right、border-top、border-bottom可以分别实现只显示文本上、下、左、右的线条。
对于inline,inline-block等，可使用line-height实现文本与竖线的居中。
html
<p class="text-info"> <i class="line line-left"></i>resto restaurant home page website template<i class="line line-right"></i> </p>
css
.text-info .line {
display: inline-block;
width: 40px;
border-top: 1px solid #fff;
/*使横线居中*/
vertical-align: middle;
/*for IE7*/
*margin-top: 22px;
}分析
在文本前后添加i、span标签相对使用伪元素:before和:after更加清晰明了。
vertical-align:middle实现线与文本垂直居中。
该属性在ie7中失效
可使用margin-top实现（前提知道parent-element高度
html
<div class="menu-tips">The menu</div>
css
.menu-tips:after {
position: absolute;
left: 0;
bottom: 0;
content: "";
width: 0;
height: 0;
/*menu是156px宽，所以这里设置78px*/
border-left: 78px solid transparent;
border-right: 78px solid transparent;
border-bottom: 10px solid #fff;
}分析
通过transparent属性配合border实现三角形。
注意的是，我们可以使用position属性使:before和:after插入到任意位置，不仅仅是“前”或“后”。可以实现右图的线条位于文字“成为我们的志愿者”的正下边。
圆形
html
<div class="btn-group"> <a href="" class="btn"></a> <a href="" class="btn active"></a> <a href="" class="btn"></a> <a href="" class="btn"></a> </div>
css
.index-panel-header .btn-group {
float: right;
/*清除行内元素的4px空白间距*/
font-size: 0;
}
.index-panel-header .btn {
display: inline-block;
margin-left: 11px;
width: 9px;
height: 9px;
background: #dedede;
/*画圆*/
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari 和 Chrome */
border-radius:5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
/*for ie7、8*/
position: relative;
z-index:2;
behavior: url(../ie-css3.htc); /* 通知IE浏览器调用脚本作用于'btn'类 */
}分析
这里是banner轮播图等需求的做法，因为是连续的按钮，只要利用border-radius的属性画出圆形。
border-radius在IE8以下无法使用，需要强制
Trick1：用图片background替代
Trick2：调用脚本 ie-css3.htc，使IE浏览器支持css3属性。
当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
z-index值一定要比周围元素的要高
自定义图标
html
<div class="star-bar"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star nostar"></span> </div>
css
.star-bar {
font-size: 0px;
}
.star {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
background: url("../images/index-star.png") no-repeat;
}
.nostar {
background-position: 0 -10px;
}分析
这里是一些评分等需求的做法，利用background的属性显示图片。
扩展的知识
关于如何居中元素，这里有个作弊工具：如何居中元素
总结
如果是连续多个图标符号，则使用HTML标签表示。
如果是插入单个符号的话，在不考虑兼容性的情况下，使用伪元素 > 额外添加HTML标签。
热心网友
时间：2022-05-12 15:04
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：。
<div style="margin-top: 30px;width: 200px;height:80px;border: 1px solid blue;">
<div style="background-color: white;position: absolute;left: 30px;top: 15px;">文字</div>
</div>
3、浏览器运行index.html页面，此时实现了边框角落开口显示文字。
热心网友
时间：2022-05-12 16:22
这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现
position:relative;下面举例说明
创建Html元素
<div><span class="title">我是边框上的文字</span>
<span>我是边框内的文字</span>
</div>
设置css样式
div{width:200px;
height:100px;
padding:5px 30px;
margin:50px;
border:4px solid #ebcbbe;
}
span.title{
display:block;
width:150px;
height:30px;
position:relative;
top:-15px;
text-align: center;
background: white;
}
观察显示效果
热心网友
时间：2022-05-12 17:56
<legend>文字内容</legend>
<p>kkkk</p>
</fieldset>
这样就行
热心网友
时间：2022-05-12 19:48
例子
<fieldset>
<legend>文字内容</legend>
这里是内容
</fieldset>
热心网友
时间：2022-05-12 21:56
<fieldset>
<legend>标题</legend>
<p>内容</p>
</fieldset>
====================
方法2：
<div style="border:1px solid #666; height:100px; width:300px; position:relative;">
<h3 style=" background:#FFF; display:block; height:20px; width:50px; position:absolute; left:10px; top:-30px; text-align:center">标题</h3>
<p>内容</p>
</div>
注：设置position:absolute;并控制坐标（left、top）将标题调整到理想位置，设置白色背景挡住边框模拟出效果
