如下效果:
废话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div边框线上加文字</title>
</head>
<body>
<div class="warp">
<fieldset>
<legend>各凭本事做人渣</legend>
<ul>
Name: <input type="text"><br>
Email: <input type="text"><br>
password:<input type="password">
</ul>
</fieldset>
</div>
</body>
</html>
<style>
fieldset{
width: 300px;
height: 300px;
}
fieldset legend{
color: blue;
margin:0 20px; /**文字距离左右边框的距离*/
padding: 0 20px; /**文字与线之间的缝隙大小*/
}
</style>