React中样式调整“横线“的使用

可以使用HTML的<hr/>标签

height:2px;是hr的高度;
border:none;是没有边框;
border-top:2px

dotted;是设置横线的样式
none：无样式；

dotted：点线；

dashed：虚线；

solid：实线；
double：双线；

groove：槽线；

ridge：脊线；

inset：内凹；

outset：外凸;

groove 上颜色

skyblue 下颜色

效果如下：

案例代码

<span>1、点线:dotted<span>
<hr style=" height:2px;border:none;border-top:2px dotted black;"/><span>2、虚线:dashed<span>
<hr style="height:1px;border:none;border-top:1px dashed blue;"/><span>3、实线:solid<span>
<hr style="height:1px;border:none;border-top:1px solid yellow;"/><span>4、双线:double<span>
<hr style="height:3px;border:none;border-top:3px double red;"/><span>5、脊线:ridge<span>
<hr style="height:5px;border:none;border-top:5px ridge green;"/><span>6、槽线:groove<span>
<hr style="height:10px;border:none;border-top:10px groove skyblue;"/><span>7、内凹:inset<span>
<hr style="border:6 inset #ff0033" width="100%" SIZE=6><span>8、外凸:outset<span>
<hr style="border:6 outset #ff0033" width="100%" SIZE=6><span>9、两头渐变透明：<span>
<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
<hr style="FILTER:borderLine (width: 100px;height:2px;background: -webkit-linear-gradient(left, #fff -4%, #333 50%, #fff 100%);"><span>10、纺锤形：<span>
<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10><span>11、右边渐变透明：<span>
<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3><span>12、左边渐变透明：<span>
<hr style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3><span>13、立体效果：<span>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%"color=#987cb9 SIZE=1><span>14、钢针效果：<span>

参考文献

1、HTML <hr> 标签 | 菜鸟教程

2、HTML中横线的使用_m0_67846661的博客-CSDN博客_html 横线

React中样式调整“横线“的使用相关推荐

react中样式冲突_如何通过React中的样式使您的应用漂亮
react中样式冲突 by Vinh Le 由Vinh Le 如何通过React中的样式使您的应用漂亮 (How to make your apps pretty with styling in Re ...
this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
[react] 举例说明在react中怎么使用样式
[react] 举例说明在react中怎么使用样式 all in js 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试 ...
react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释
共index.js.index.html. TodoList.js这三个文件,主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法,会在下方做全面的解释运行效果: i ...
React中CSS样式
文章目录一.内联样式在内联样式中使用State 二.外部样式表三.CSS Module 使用方式一.内联样式在React中可以直接通过标签的style属性来为元素设置样式.style属性需要 ...
React中的四种样式使用优缺点比较
1.组件化天下下的CSS css的设计就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方式. 组件化中选择合适的CSS解决方案应该符合以下条件: 1.可以编写局部的css:c ...
在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS 简单介绍一下自己的使用:come on baby 介绍:css in j ...
React中设置样式
1. 行内样式 <div style={{fontSize:'100px'}}></div> 2.className 在react中设置class时使用className,然后 ...

React中样式调整“横线“的使用

React中样式调整“横线“的使用相关推荐

最新文章

热门文章