css中如何设置hr的样式？csshr标签多种样式（图⽂）
在对html⽹页进⾏美化的时候，肯定少不了要⽤的hr标签进⾏修饰页⾯，但默认的hr标签样式对页⾯的修饰起不到什么好的作⽤，有经验的前端⼯作者就会通过使⽤css样式来对hr标签进⾏⼀些美化的操作。那么如何在css中给hr标签设置样式呢？本章就给⼤家介绍css设置hr 标签的⼏种样式。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你们有所帮助。
⼀、hr的是什么意思
简单来说，hr就是html页⾯上的⼀条⽔平分隔线（horizontal rule），它可以在视觉上将⽂档分隔成各个部分。需要通过<hr> 标签在HTML 页⾯中创建。
那么我们看看默认的hr标签样式：
就是⼀条⿊线，⼀点都不美观，更不⽤说⽤<hr>来美观页⾯了，这就需要⽤css来设置hr的样式了。
css怎么创建⼆、css设置hr样式
我们怎样⽤css设置hr样式？其实很简单，可以通过和来设置hr的样式：
1.css设置hr的粗细（加粗）与颜⾊
<hr /><!--修改的样式-->
<br />
<hr /><!--默认的样式-->
2.css设置hr的虚线样式（颜⾊为蓝⾊）
<hr />
3.css设置hr的双线样式
<hr />
4. css设置hr的3D⽴体样式
<hr /><!--3D 垄状-->
<hr /><!--3D 凹槽-->
5.css设置hr的渐变样式
html代码：
<hr class="style-one"/>
<br/>
<hr class="style-two"/>
css代码：
hr.style-one {/*透明渐变⽔平线*/
width:80%;
margin:0 auto;
border: 0;
height: 4px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-two{/*渐变*/
width:80%;
margin:0 auto;
border: 0;
height: 4px;
background: #333;
background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}
以上只是举了⼏个简单的例⼦，hr标签的样式还可以通过CSS来实现很多。⼤家可以动⼿试试！
以上就是css中如何设置hr的样式？css <hr>标签多种样式（图⽂）的详细内容，更多请关注我

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。