Border-gradient на CSS. Может ли кто показать?

#css

Приветствую
//представим
border-top:1px solid #999999;

Обычная горизонтальная полоска, серого цвета. Можно ли сделать градиент? Допустим
начиная с серого переходя в белый
p.s. да, признаюсь, я негодник гуглил. Есть рамки на все 4 стороны, есть JS, есть
еще фон, поверх него накладываем свой фон, получается 'как бы то, что надо'. Простых
решений не видел    

Ответы

Ответ 1

Используйте псевдо-элементы с заливкой градиентом вместо бордеров.

Посмотреть пример
Верстка



CSS

.gradient-demo::before {
    /* Градиент */
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 0%, #999999 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff),
color-stop(100%, #999999));
    background: -webkit-linear-gradient(left, #ffffff 0%, #999999 100%);
    background: -o-linear-gradient(left, #ffffff 0%, #999999 100%);
    background: -ms-linear-gradient(left, #ffffff 0%, #999999 100%);
    background: linear-gradient(to right, #ffffff 0%, #999999 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#999999',
GradientType=1);
    content: "";
    display: block;
    /* Вместо толщины */
    height: 3px;
    width: 100%;
}


Ответ 2

можно еще так 
background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250)  70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);

а вообще http://css3gen.com/gradient-generator/ ссыль