项目需求，要实现一个类似于分割线的效果，拿到效果图的时候，脑海里已经有了想法：
.line{
text-align: center;
color: rgba(51, 51, 51, 0.6);
padding: 1rem 0;
}1.采用图片/文字/图片形式实现
.line1 span{
margin:0 10px;
}
.line1 img{
width:30%;
height:1px;
vertical-align:middle;
}<div class="line line1">
<img src="image/line2.png" />
<span>冬至快乐line1</span>
<img src="image/line2.png" />
</div>2.background-image实现
.line2{
background: url("image/line.png") no-repeat;
background-size: 100% auto;
background-position-y: center;
}<div class="line line2">冬至快乐line2</div>人不折腾，怎么能叫咸鱼呢，想到了前不久用过的before，after伪类，就在想，这个可不可以实现类似的效果
3.before，after伪类模拟
.line3{
position: relative;
}
.line3:before{
content: "";
background-image: linear-gradient(to top,"#eaeaea","#eaeaea" 1px,transparent 1px);
border-bottom: 1px solid #eaeaea;
width:30%;
position: absolute;
left: 1.25rem;
top: 50%;
}
.line3:after{
content: "";
background-image: linear-gradient(to top,"#eaeaea","#eaeaea" 1px,transparent 1px);
border-bottom: 1px solid #eaeaea;
width:30%;
position: absolute;
right: 1.25rem;
top: 50%;
}<div class="line line3">冬至快乐line3</div>4.fieldset和legent实现
fieldset {
border:0;
border-top:1px dashed #ccc;
}
legend {
color: #999;
/* for IE */
background-color: #fff;
}<fieldset>
<legend align="center" class="line">冬至快乐line4</legend>
</fieldset>注：在张鑫旭大大的博客中看到的一种非常好的方法，原文地址如下：
http://www.zhangxinxu.com/wordpress/2016/11/html-fieldset-legend-element-css-layout/
写这篇文章的时候，还是冬至的时候，为了吃到美味的饺子，我也不得不放下手中的键盘，拖到了第二天。 