hr is a common hypertext label, is a horizontal line, to set some of the line thicker. Border hr itself can put hidden away, and then set the border-top-width, that is, leaving only the frame, as shown: hr default height height is 0, so it will not show rectangular border, the border is actually hr, but also up and down four border value of 1, the default can be a variety of margins and borders hr in the browser to view, but after the height set high, it can be seen that the rectangular frame with itself hr.
Must take hr border set itself is none, because there is a default hr for the four sides of the frame 1, remove the other a border, then set only on the border set.
hr for general horizontal line, it is not necessary to add this hr rectangular border may be provided only on the frame, the frame is a real line, and then set the border width (thickness), can be provided some level of crude straight line.
Code: border: none; border-top : 30px solid # 00ff00;
code above is a short form, border-top behind with three parameters were written:
each write code: border: none; border-top -width: 30px ; border-top-style: solid ; border-top-color: # 00ff00;
Test code:
< Div ID = "D1" > < P style = "margin: 0;" > & nbsp; (. 1) </ P > <-! Default height is 0 -> < HR style = "border-Color: # 0000FF ; " > < P style =" margin: 0; " > & nbsp; (2) </ P > ! <- height is not 0, the frame display -> < HR style =" height: 5px; border-Color : # 0000FF; " /> < P style =" margin:0;"> （3）</ P > <-! No border is displayed, is provided on the frame 30px solid line color -> < HR style = "border: none; border-Top: Solid # 00FF00 30px;" /> < P style = "margin: 0; " > & nbsp; (. 4) </ P > <-! same (3), separate write mode -> < HR style =" border: none; border-Top-width: 30px; border-style-Top : Solid; border-Top-Color: # 00FF00; " /> ----------------------------------- -------------------------------------------------- ---------------- < P style = "margin: 0;" >nbsp &; (5) Error</ P > <-! Not set the border none -> < HR style = "border-Top: Solid # 00FF00 30px;" /> < P style = "margin: 0;" > & nbsp; (. 6) error </ P > <-! error writing 1, is provided instead of border-style-Top-style border -> < HR style = "border: none; border-Top-width: 30px; border-style: Solid ; border-Top-Color: # 00FF00; " /> </ div >
Icon:
FIG:
Default hr default styles: top margin margin 8px, the bottom margin margin 8px, no margin left, up and down are 1px border, a height of 0.5
to hr plus the default height: 5px style: remaining above, the height as 5px (due to the change in height, around the border of 1px are revealed)
on the single sideline and bold styles: margin and with high default, no border around and below, on the border to 30px.
