Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "hr tags in html5 how to use css to set style", detailed content, clear steps, details handled properly, I hope that this article "hr tags in html5 how to use css to set styles" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

In html5, hr tags can be styled with css, and css styles can define how HTML elements are displayed. You only need to use the style attribute to set hr elements with css style, with syntax of "" or "hr {css style code;}".

The operating environment of this tutorial: windows10 system, HTML5 version, Dell G3 computer.

Can I use css for hr tags in html5?

Simply put, a hr is a horizontal separation line (horizontal rule) on a html page that visually divides a document into sections. It needs to be created in the HTML page through tags.

So let's take a look at the default hr tag style:

Is a black line, not beautiful at all, let alone used to beautiful pages, which requires the use of css to set the style of hr.

Css sets hr style

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

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

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

3.css sets the double-line style of hr

4. Css sets the 3D stereo style of hr

5.css sets the gradient style of hr

Html Code:

Css Code:

Hr.style-one {/ * transparent gradient horizontal line * / 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 {/ * gradient * / width:80%; margin:0 auto; border: 0; height: 4px; background: # 333 Background-image: linear-gradient (to right, red, # 333, rgb (9,206,91);}

Read this, the "html5 hr tags how to use css style" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.