欢迎访问 我站: /
第一种：
//文本两侧横线 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%
)
