stworzyć piękną linię poziomą z CSS tylko

Question

Jest poradnik here, w jaki sposób to zrobić w photoshopie:

Próbuję to zrobić tylko z CSS. Im bliżej mogę się dostać, tym jest fiddle.

hr.fancy-line { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    box-shadow: 0px -2px 4px rgba(136,136,136,0.75); 
} 

<hr class="fancy-line"></hr> 

Doing gradient w cieniu wydaje się dość trudne. Jakieś pomysły, jak mogę to poprawić?

Answer 1

Chciałbym użyć radial-gradient do pseudoelementu zamiast box-shadow, ponieważ zwęża się ku brzegom ładniej.

Ustaw pozycję radial-gradient powyżej <hr>, tak aby była przecięta na pół. Następnie umieść kolejny element psuedo tuż poniżej <hr> o tym samym kolorze co tło i wysokość wystarczająco duże, aby pokryć pozostałą część gradientu.

Updated JSFiddle

---

CSS

hr.fancy-line { 
    border: 0; 
    height: 1px; 

} 
hr.fancy-line:before { 
    top: -0.5em; 
    height: 1em; 
} 
hr.fancy-line:after { 
    content:''; 
    height: 0.5em; 
    top: 1px; 
} 

hr.fancy-line:before, hr.fancy-line:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
} 

hr.fancy-line, hr.fancy-line:before { 
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%); 
} 

body, hr.fancy-line:after { 
    background: #f4f4f4; 
} 

Answer 2

Proszę spojrzeć na https://codepen.io/ibrahimjabbari/pen/ozinB. Ta strona internetowa zawiera 18 stylów linii poziomych. Niektóre wydają się niesamowite.

Poniżej znajduje się przykład.

hr.style17 { 
    border-top: 1px solid #8c8b8b; 
    text-align: center; 
} 
hr.style17:after { 
    content: '§'; 
    display: inline-block; 
    position: relative; 
    top: -14px; 
    padding: 0 10px; 
    background: #f0f0f0; 
    color: #8c8b8b; 
    font-size: 18px; 
    -webkit-transform: rotate(60deg); 
    -moz-transform: rotate(60deg); 
    transform: rotate(60deg); 
} 

Answer 3

Oto najprostsza forma do osiągnięcia tego celu:

hr{ 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}