HR + CSS split line

Source: Internet
Author: User

Solid line: <HR Align = left width = 490 color = #990099 size = 3 noshade>

 

Vertical Line: <HR Align = center width = 1 color = Red size = 100>

Dotted Line: <HR size = 1 style = "color: Blue; border-style: dotted; width: 490px; color: # CCC">

Double Line: <HR size = 1 style = "color: # ff9999; border-style: Double; width: 490px; color: # CCC">

Stereo: <HR size = 8 style = "color: # ffd306; border-style: outset; width: 490px; color: # CCC">

Gradually become transparent on the left: <HR size = "2" color = "# ff9966" style = "filter: alpha (opacity = 10, finishopacity = 100, style = 1, startx = 0, starty = 0, finishx = 100, finishy = 100); width: 490; ">

Gradually become transparent on the right: <HR size = "2" color = "# ff9966" style = "filter: alpha (opacity = 10, finishopacity = 100, style = 1, startx = 100, starty = 100, finishx = 0, finishy = 0); width: 490; ">

Style:

The Code is as follows:

<HR style = "width: 100%; color: #999; border-top-style: dashed; border-right-style: dashed; border-left-style: dashed; height: 1px; border-bottom-style: dashed ">

Use the <HR> label
Basic: <HR width = 300 size = 1 color = #5151a2 align = center noshade>
Width specifies the length of a line, which can also be a percentage. color indicates color, and size indicates thickness;
Align specifies the line position, including left (left-aligned), right (right-aligned), and center (center-aligned). noshade indicates whether the line has a stereoscopic effect.

Gradient transparency at both ends: (using CSS filters)
<HR width = 80% size = 3 color = #5151a2 style = "filter: alpha (opacity = 100, finishopacity = 0, style = 3)">

Gradient transparency on the right:
<HR width = 80% size = 3 color = #5151a2 style = "filter: alpha (opacity = 100, finishopacity = 0, style = 1)">
Dotted line:
<HR width = 80% size = 1 color = #5151a2 style = "border: 1 dashed #5151a2">

Draw two lines:
<HR width = 80% size = 3 color = #5151a2 style = "border: 3 double green">

Stereoscopic effect:
<HR width = 80% size = 3 color = #5151a2 style = "filter: progid: DXImageTransform. Microsoft. Shadow (color #5151a2, direction: 145, strength: 15)">

Spinning shape:
<HR width = 80% size = 30 color = #5151a2 style = "filter: alpha (opacity = 100, finishopacity = 0, style = 2)">

Steel Needle effect:
<HR width = 80% size = 3 color = #5151a2 style = "filter: progid: DXImageTransform. Microsoft. Glow (color = #5151a2, strength = 10)">
You can also use the <Table> label
For example, <Table width = "100%"> <tr> <TD Height = "1" bgcolor = "# ff0000"> </TD> </tr> </table> tables)
Horizontal dash: <TD style = "Background: url(dot.gif) Repeat-x Center"> & nbsp; </TD>
Vertical DASH: <TD style = "Background: url(dot.gif) Repeat-y center"> & nbsp; </TD>
Of course there are many other methods. You can refer to HTML and CSS related materials.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.