html 文字两边加横线\竖线\ Css3中间文本两侧横线

欢迎访问我站: 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,
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%
)

html 文字两边加横线\竖线\ Css3中间文本两侧横线相关推荐

html字两边的横线_css怎么在文字两边加上横线,word文字两边加横线
css怎么在文字两边加上横线CSS怎么在文本两侧添加水平线,在css中,可以使用:before.after和content属性在文本两侧添加横线:语法"e:在前,e:在后{内容:" ...
合并的表格怎么加横线_如何在excel中文字后面加横线
如何在excel中文字后面加横线以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 如何在excel中文字后面加横线好办啊 ...
html在字体两边加直线,css怎么在文字两边加上横线
css中可利用:before.:after和content属性来在文字两边加上横线:语法"E:before,E:after{content:"";flex:1 1;bor ...
html在字体两边加直线,CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...
h5的横线_CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...
html字两边的横线_css怎么在文字两边加上横线
css中可利用:before.:after和content属性来在文字两边加上横线:语法"E:before,E:after{content:"";flex:1 1;bor ...
实现文字后面加一条横线的效果
学习是一个长期积累的过程,积累的多了也就有经验了,有能力了: 无论再忙也要坚持学习,继续我的学习! 实现的效果图: 我们能够看到,文字的两边出现了一小节横线: 实现思路: 第一步:先实现一个外层的 d ...
html字两边的横线_css实现中间文字两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
TextView过长显示省略号， TextView文字中间加横线
1.TextView显示的内容过长时自动显示省略号: 省略号的位置: android:ellipsize="end" 省略号在结尾 android:ellipsize=&qu ...

html 文字两边加横线\竖线\ Css3中间文本两侧横线

html 文字两边加横线\竖线\ Css3中间文本两侧横线相关推荐

最新文章

热门文章