展开全部
需要准备的材料分别有：电脑、浏览器、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页面，此时实现了边框角落开口显示文字。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个可以通过相对定位使某元素恰好处在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;
}观察显示效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
最简单的方法：（缺点不兼容老版本的ie）
<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）将标题调整到理想位置，设置白色背景挡住边框模拟出效果
<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）将标题调整到理想位置，设置白色背景挡住边框模拟出效果
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以用<fieldset>
例子
<fieldset>
<legend>文字内容</legend>
这里是内容
</fieldset>
例子
<fieldset>
<legend>文字内容</legend>
这里是内容
</fieldset>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<fieldset>
<legend>文字内容</legend>
<p>kkkk</p>
</fieldset>
这样就行
<legend>文字内容</legend>
<p>kkkk</p>
</fieldset>
这样就行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
