方法一:
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的
标签中,输入html代码:。文字
3、浏览器运行index.html页面,此时实现了边框角落开口显示文字。
方法二:
这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现
1
position:relative;
下面举例说明
创建Html元素
1
2
3
4
我是边框上的文字
我是边框内的文字
设置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;
}
观察显示效果
方法三:
这样就行