4

Приветствую

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

Обычная горизонтальная полоска, серого цвета. Можно ли сделать градиент? Допустим начиная с серого переходя в белый

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

1
  • Не нужно никаких фильтров и прочего хлама. Все делается довольно легко. В этом видео дословно показано и рассказано как сделать градиент у рамки. 5 апр 2020 в 17:02

2 ответа 2

7

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

Посмотреть пример

Верстка

<div class="gradient-demo"></div>

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%;
}
1
  • Пример шикарный!
    – sergey
    4 мар 2014 в 13:08
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/ ссыль

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.