方法一：
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="position: absolute;left: 30px;top: 15px;">文字</div>
</div>
3、浏览器运行index.html页面，此时实现了边框角落开口显示文字。
方法二：
这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现
|
1
|
position:relative; |
下面举例说明
创建Html元素
|
1
2
3
4
|
<div> <span class="title">我是边框上的文字</span> <span>我是边框内的文字</span></div> |
设置css样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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;} |
观察显示效果
方法三：
<fieldset>
<legend>文字内容</legend>
<p>kkkk</p>
</fieldset>
这样就行
原文：https://www.cnblogs.com/Antwan-Dmy/p/11798950.html