0
답변에 멋진 시간 구배가 있습니다 (업데이트 된 CSS를 표시하는 jsfiddle) - Create a beautiful horizontal line with CSS only입니다. 그것은 정확히 내가 무엇을해야하지만 위의 대신 선 아래에 그라디언트를 표시하고 싶습니다. 나는 여러 가지 다른 일을 시도했지만이 동작하지 않습니다라인 아래에 시간 방사형 그래디언트 만들기
hr.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
/* Keep other elements away from pseudo elements*/
}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content: '';
height: 0.5em;
/* half the height of :before */
top: 1px;
/* height of hr*/
}
hr.fancy-line:before,
hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
hr.fancy-line,
hr.fancy-line:before {
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
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;
}<hr class="fancy-line"></hr>플러스, 내가 그것을 변경할 때마다, 라인 자체는 사라 -
HTML
은 매우 간단합니다.사람이 ... 당신에게
그냥 ...은 "은폐"요소를 이동 ... –
가 난 매우 죄송하지만, 조금 더 많은 정보가 필요합니다 ... 무엇/어떻게 정확히 부탁합니까? –
'hr.fancy-line : after'에서'top : 1px'를'bottom : 1px'로 대체하십시오. 끝난. –