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

---

tag.

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

---

Now that the page is beautiful, you need to use css to set the style of hr.

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="max-width:90%"/>

3.css sets the double-line style of hr

<hr   style="max-width:90%"/>

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

---

tag multiple styles (graphics and text)"/>

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

<hr   style="max-width:90%"/>

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

---

tag multiple styles (graphics and text)"/>

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!