<h1>هشت نوع خط با سی اس اس</h1>

	   <hr class ="style-one">
	   <div class ="code">
	   <h2>Code1</h2>
	   <style>/* Gradient color1 - color2 - color1 */

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image:	-ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image:	 -o-linear-gradient(left, #ccc, #333, #ccc);
}</style>
	   </div>

	   <hr class ="style-two">
	   <div class ="code">
	   <h2>Code2</h2>
	   <style>/* Gradient transparent - color - transparent */

hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:	-ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:	 -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}</style>
	   </div>

	   <hr class ="style-three">
	   <div class ="code">
	   <h2>Code3</h2>
	   <style>/* Double-color dashed line */
	   
hr.style-three {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}</style>
	   </div>

	   <hr class ="style-four">
	   <div class ="code" style="margin-top: -5px;">
	   <h2>Code4</h2>
	   <style>/* Single-direction drop shadow */
	   
hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}</style>
	   </div>

	   <hr class ="style-five">
	   <div class ="code" style="margin-top: 13px;">
	   <h2>Code5</h2>
	   <style>/* Cloud */
	   
hr.style-five {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}
hr.style-five:after {  /* Not really supposed to work, but does */
    content: "\00a0";  /* Prevent margin collapse */
}</style>
	   </div>

	   <hr class ="style-six">
	   <div class ="code">
	   <h2>Code6</h2>
	   <style>/* Inset, by Dan Eden */

hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}</style>
	   </div>

	   <hr class ="style-seven">
	   <div class ="code" style="margin-top: -27px;">
	   <h2>Code7</h2>
	   <style>/* Flaired edges, by Tomas Theunissen */

hr.style-seven {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}</style>
	   </div>

	   <hr class ="style-eight">
	   <div class ="code" style="margin-top: -20px;">
	   <h2>Code8</h2>
	   <style>/* Glyph, by Harry Roberts */

hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}</style></div>