Графический градиент CSS с одной стороны?

Question

Следующая CSS создает градиент границы на левой & правой стороне элемента:

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-left: 10px solid; 
 
    border-image: linear-gradient(#00f,#000) 0 100%; 
 
}

<div></div>

http://jsfiddle.net/5p8cv5t9/

Как я могу применить градиент только к левой стороне?

Answer 1

Вы можете легко определить ширину границы на всех остальных сторонах. Проблема связана с тем фактом, что значение по умолчанию border-width (MDN) составляет medium, а не 0.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-width: 0; 
 
    border-left: 10px solid; 
 
    border-image: linear-gradient(#00f, #000) 0 100%; 
 
}

<div></div>

Answer 2

вы можете определить правую границу 0px. Надеюсь это поможет.

div { 
    width: 100px; 
    height: 100px; 
    border-left: 10px solid; 
    border-right: 0px; 
    border-image: linear-gradient(#00f,#000) 0 100%; 
}