greensock으로 CSS 전환

Question

greens와 함께 테두리 색상을 위에서 아래로 변경할 수있는 방법이 있습니까? 간단한 라인 div이고 색상을 위에서 아래로 변경하고 싶습니다.

예)

.line { 
    position: relative; 
    border: 1px solid #c3ced8; 
    width: 0; 
    height: 50px; 
    display: block; 
    content: ''; 
    z-index: 1; 
    top: -19px; 
    margin: 0; 
    left: 5.3px; 
    margin-bottom: -30px; 
} 

상단에서 아래로 greensock lib 디렉토리와의 테두리 색상을 변경하고 싶습니다.

Answer 1

당신은 당신이 아래 위에서 무엇을 의미합니까

.line { 
 
    position: relative; 
 
    border: 1px solid; 
 
    width: 0; 
 
    height: 50px; 
 
    display: block; 
 
    content: ''; 
 
    z-index: 1; 
 
    top: -19px; 
 
    margin: 0; 
 
    left: 5.3px; 
 
    margin-bottom: -30px; 
 
    -webkit-border-image: -webkit-linear-gradient(#f00, #00f) 1; 
 
    -o-border-image: -o-linear-gradient(#f00, #00f) 1; 
 
    border-image: linear-gradient(to bottom, #f00, #00f) 1; 
 
}

<div class="line"></div>