方法一：
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="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>
這樣就行