欢迎访问 我站: http://www.rioyi.com/

第一种：

//文本两侧横线 PC<style>
.exple {height: 50px;text-align: center;display: flex;align-items: center;justify-content: center;}.exple .line {display: inline-block;width: 100px;border-top: 1px solid #ccc;height: 2px;background: #004aa9;}.exple .txt {color: #686868;vertical-align: middle;display: flex;flex-direction: column;font-size: 18px;margin: 0 15px;}
</style>
<div class="exple"><span class="line"></span><div class="txt"><span>友情链接</span><span>IM LINKS</span></div><span class="line"></span>
</div>//文本两侧横线 移动
<style>
.products_title{width: 100%;height: 1rem;display:flex;justify-content:center;align-items:center;margin: 0.5rem 0;
}
.products_title .txt{font-size: 0.56rem;padding: 0 0.6rem;
}
.products_title .line{display: inline-block;width: 1.2rem;height: 1px;background: #000;
}</style>
<div class="products_title">  <span class="line"></span>  <span class="txt">文字在中间</span>  <span class="line"></span> </div>

//竖线<div class="line"></div>
css中：
.line{display:inline-block;height: 导航条的高度(或者你觉得合适的高度);width: 1px;background: #000;
}//横线
height: 1px;
transform: scale(0.5);
background:red;

 

css:
.pd_title{width: 100%;height: 1.4rem;display:flex;justify-content:center;align-items:center;margin: 0.5rem 0;background: #f2f2f2;
}
.pd_title .txt{font-size: 0.56rem;padding: 0 0.6rem;
}
.pd_title .line{display: inline-block;width: 1.2rem;height: 1px;background: #948e8e;
}html:
<div class="pd_title">  <span class="line"></span>  <span class="txt">商品详情</span>  <span class="line"></span> </div>

<style>
.title{text-align: center;font-size: 28px;margin: 24px 0;display: flex;/*弹性布局*/
}
.title .title_name{padding: 0 20px;
}
.title .line{background:linear-gradient(transparent 49%,#000 49%,#000 51%,transparent 51%);flex:1;/*均分父级元素、父级元素定义display:flex,子元素宽度用flex来定义各占一半*/
}
</style>

<h2 class="title"><span class="line"></span><span class="title_name">文本信息</span><!--可以随意增加字--><span class="line"></span></h2>

代码解析：

background:linear-gradient();线性渐变
background:linear-gradient(
to top,<!--从下到上、to bottom 从上到下(默认) to left 右到左 to right从左往右-->
red 20%,
green 70%,
blue 90%
);
background:linear-gradient(
     red 20%,
     green 20%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡。
     green 90%,
     black 51%
);
接下来：
background:linear-gradient(
     tansparent 49%,红色这里改成透明 红色占49%
     green 49%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡
     green 51%,中间绿色就只占2%（51-49）
     transparent 51% 再把最后一个颜色改成transparent 中间就只剩下绿色了。黑色51% 
)