html文字两边是线条,css 两边是线，中间文字的多种实现方法

css 两边是线，中间文字的多种实现方法

历史活动一

历史活动二

历史活动三

.soild_text_one{

width:500px;

margin:0 auto;

fieldset{

height: 500px;

border-left: none;

border-right: none;

border-bottom: none;

color: #009688;

border-color: #defffc;

height:20px;

legend{

text-align: center;

padding: 0 10px;

font-size: 14px;

}

.soild_text_two{

text-align:center;

width:500px;

margin:0 auto;

height:20px;

font-size: 14px;

color: #4caf50;

hr{

width:200px;

display:inline-block;

vertical-align:middle;

border-color: #e4ffe6;

}

span{

padding: 0 10px;

}

.soild_text_three{

position:relative;

text-align:center;

width:500px;

margin:20px auto;

height:20px;

font-size: 14px;

color:#ff9800;

&::before,&::after{

content:"";

position:absolute;

top:50%;

border:solid 1px #fbdfb6;

width:40%;

}

&::before{

left:0;

}

&::after{

right:0;

}

标签：文字,color,text,height,width,两边,border,css,500px

来源： https://blog.csdn.net/jiangyue2694/article/details/110000176

html文字两边是线条,css 两边是线，中间文字的多种实现方法相关推荐

文字替代图片（CSS加载不出来文字代替）
当网速很慢,CSS/Javascript不加载,这个时候,有些带有超链接的图片,需要用代链接的文字代替,例如淘宝网的logo,本身就是一个超链接,当网络不行的情况,只会显示出来淘宝网三个字的超链接,总 ...
html文字环绕居中图,CSS实现模拟float: center文字左右环绕图片的效果
什么是文字左右环绕图片?就是下图的效果: 效果的CSS代码可以点击这里查看在CSS中,并没有float: center这种设置,但是我们可以通过一些小技巧来模拟出类似的效果. 经常会有小伙伴问: ...
HTML+CSS中文字两边线水平居中且两边对齐
HTML+CSS中文字两边线水平居中且两边对齐 HTML+CSS想要文字两边出现水平居中的线且根据盒子的宽度两边对齐,水平居中, 这样的话可以用这样伪类来实现效果. <CSS部分> .t ...
html文本居中左右有横线,CSS伪类实现中间文字两边横线效果
利用CSS伪类实现中间文字两边横线效果效果图: 实现代码: CSS伪类实现中间文字两边横线效果 body { margin: 0; } .login_content { position: abso ...
HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果简要教程这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
css链接的线,CSS网页技巧：实现超级链接文字上划线和下划线
链接文字的上划线.下划线.删除线(贯穿线).闪烁等可以通过CSS的text-decoration属性来实现.其属性值与效果相对应的关系如下: text-decoration: none : 无装饰 b ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
[原创] CSS自定义IOS苹果，Android安卓的CheckBox 效果，可以根据文字大小变化而变化，内框显示文字，另外可自定大小，自定颜色...
在经过对网上一些自定CheckBox的一番研究之后,现在综合讲一下该样式实现的技巧. 先上图: 图中已展示了多种样式,实现的原理很简单,一个外Box,一个内Box,外Box显示背景色,内Box显示白色 ...
CSS 之控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

html文字两边是线条,css 两边是线，中间文字的多种实现方法

html文字两边是线条,css 两边是线，中间文字的多种实现方法相关推荐

最新文章

热门文章