需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：。
<div style="margin-top: 30pxwidth: 200pxheight:80pxborder: 1px solid blue">
<div style="background-color: whiteposition: absoluteleft: 30pxtop: 15px">文字</div>
</div>
3、浏览器运行index.html页面，此时实现了边框角落开口显示文字。
控制文本与边框的距离，要使用css的内边距属性padding来实现。请看下方示例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>angular demo</title>
</head>
<body>
<style type="text/css">
.box{width:150pxheight:150pxborder:1px solid #333padding:10pxfont-size:12px}
</style>
<div class="box">
这里是测试的文字，修改padding值就可以改变文字距离边框的距离了。
</div>
</body>
</html>
示例中设置的padding值为10px；文字距离边框的距离即为10px。可通过修改值来改变距离。实现效果如下图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字描边</title>
<style>
.text{
/* -webkit-box-reflect: below*/
-webkit-text-stroke:1px #f00
font-size:50px
font-weight: bold
font-family: "微软雅黑"
width: 900px
height: 200px
line-height: 200px
margin:50px auto
text-align: center
}
</style>
</head>
<body>
<div class="text">用我三生烟火，换你一世迷离</div>
</body>
</html>
希望可以帮到你 望采纳
