How to set the style of hr in css? css tag multiple styles (graphics and text)

When beautifying an html web page, the hr tag must be used to modify the page. However, the default hr tag style does not play a good role in modifying the page. Experienced front-end workers will use it. Use css styles to perform some beautifying operations on the hr tag. So how to style the hr tag in css? This chapter will introduce you to several styles of setting hr tags in css. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What does hr mean?

Simply put, hr is a horizontal dividing line (horizontal rule) on the HTML page, which can visually separate the document into various parts. Needs to be created in the HTML page via the

Then let’s take a look at the default hr tag style:

is just a black line, which is not beautiful at all, let alone using

2. Set hr style with css

How do we set hr style with css? In fact, it is very simple. You can set the style of hr through css border property and css background-image property:

1.css sets the thickness of hr (bold) With color

<hr style="border: 5px solid red;"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->

2.css sets the dashed line style of hr (color is blue)

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>

3.css sets the double-line style of hr

<hr style="height:3px;border:none;border-top:3px double red;"/>

4.css sets the 3D three-dimensional style of hr

<hr style=" height:5px;border:none;border-top:5px ridge green;"/><!--3D 垄状-->
<hr style=" height:10px;border:none;border-top:10px groove skyblue;"/><!--3D 凹槽-->

5.css Set the gradient style of hr

html code:

<hr class="style-one"/>
<br/>
<hr class="style-two"/>

css code:

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));
}

The above are just examples Following a few simple examples, the style of the hr tag can also be achieved through CSS. Everyone can give it a try!

The above is the detailed content of How to set the style of hr in css? css tag multiple styles (graphics and text). For more information, please follow other related articles on the PHP Chinese website!