方法一：
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：。
<div style="margin-top: 30px; 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元素
1234<div><spanclass="title">我是边框上的文字</span><span>我是边框内的文字</span></div> -
设置css样式
12345678910111213141516div{width:200px;height:100px;padding:5px30px;margin:50px;border:4pxsolid#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>
这样就行