method one:
1. First, open the html editor, create a new html file, for example: index.html.
2, in the index.html <body> tag, enter html code:
<div style="margin-top: 30px;width: 200px;height:80px;border: 1px solid blue;">
<div style="position: absolute;left: 30px;top: 15px;">文字</div>
</div>
3, the browser run index.html page, then realized the border opening corner display text.
Method Two:
This is accomplished by the relative positioning of the elements in a way exactly at the border on the div to achieve
|
1
|
position
:
relative
;
|
Exemplified below
-
Creating Html element
1234<div><spanclass="title">我是边框上的文字</span><span>我是边框内的文字</span></div> -
Set css styles
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;} -
Observe the display
Method three:
<the fieldset>
<Legend> text </ Legend>
<P> kkkk </ P>
</ the fieldset>
This trip