<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{background: #f0f0f0}
.con{position:relativeheight:1.875remline-height: 1.875remmargin:2.47rem autotext-align: center}
.con i{display:blockheight:1pxbackground:#e1e1e1position:absolutetop:0.9remwidth:100%}
.con p{
display:inline-block
font-size: 0.75rem
color:#c1c1c1
background:rgba(240,240,240,1)
padding:0 1.875rem
text-align: center
margin:0 auto
position:relative
z-index:2}
</style>
</head>
<body>
<div class="con">
<i></i>
<p>到底了</p>
</div>
</body>
</html>
这里使用了背景色和透明度，细心的人可能会发现，body设置的背景色刚好是‘到底了’的文字的背景色，同时也用了行内块、透明度以及相对定位来实现了的噢。
text-decoration:underline
padding-bottom:2pxborder-bottom:1 solid#fff
设置下划线，然后再设置下边缘的border属性，并让其自适应大小，就可以实现双下划线的效果，
或者也可以用带双下划线的图片来代替，并让其自适应
方法很多：
1.最渣的方法：图片
2.第二渣的方法：3个标签：1）外框用来posotion:relative2）文字有背景色；3）就是那条线，原理就是文字用定位浮起来然后加上背景色遮住线，造成这种效果；
3.我推荐的方法：
html:
<fieldset>
<legend align='center'>健康日志</legend>
</fieldset>
css:
fieldset{
border: none
border-top: 1px solid #ccc
}
html标签，兼容所有浏览器。。。谁用谁知道
