HR removes the shadow part and is fully compatible across browsers

Many people on the internet copy others' answers. Even the descriptions are similar. The online descriptions are as follows:

In HTML, the height of the Central Water Balance line HR is two pixels by default. The border-top height is 1px, the color is black, and the border-bottom height is 1px. In this case, the shadow effect is displayed, it is easy to remove the shadow. You only need to set the border-bottom or border-top attribute to none in CSS.

This is the only option, but it is not compatible with border-top or border-bottom. The correct method is (take the dot line as an example ):

<HR style = "border: none; border-top: 1px dotted #000; Height: 1px;"/>. Note that height: 1px must be added;

HR removes the shadow part and is fully compatible across browsers