【收藏】一些实用的分割线

网页中经常会用到一些简单但是实用的分割线。
这里收藏了一些css制作的分割线（拿来主义^_^）

分割线one

<hr class="style-one">hr.style-one {    border: 0;    height: 1px;    background: #333;    background-image: linear-gradient(to right, #ccc, #333, #ccc);}

分割线two

 <hr class="style-two"> hr.style-two {    border: 0;    height: 1px;    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));}

分割线three

 <hr class="style-three"> hr.style-three {    border: 0;    border-bottom: 1px dashed #ccc;    background: #999;}

分割线four

<hr class="style-four">hr.style-four {    height: 12px;    border: 0;    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);}

分割线five

<hr class="style-five">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 */}

分割线six

<hr class="style-six">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);}

分割线seven

<hr class="style-seven">hr.style-seven {    height: 30px;    border-style: solid;    border-color: black;    border-width: 1px 0 0 0;    border-radius: 20px;}hr.style-seven:before {     display: block;    content: "";    height: 30px;    margin-top: -31px;    border-style: solid;    border-color: black;    border-width: 0 0 1px 0;    border-radius: 20px;}

分割线eight

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

---