Как применить линейный градиент к границе ввода?

Можно ли применить линейно-градиентный цвет к границе ввода?
Я пробовал следующее:

input{
    border: 5pt solid linear-gradient(rgba(0, 25, 50, 0.5), rgba(0, 0, 25, 0.5));
}


Проблема с приведенным выше кодом заключается в том, что вы не можете использовать линейный градиент в качестве цвета.
Просто уточняю, я не хочу менять цвет фона ввода, а только цвет границы.

JSFIDDLE:
http://jsfiddle.net/o1yhod9t/


css border linear-gradients
person BernardoLima    schedule 10.10.2015    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы не можете напрямую добавить градиент к свойству border, так как третий параметр принимает только цвет< /а>. Вместо этого вам придется использовать свойство border-image, как в приведенном ниже фрагменте.

Обратите внимание, что в настоящее время поддержка этого свойства браузерами довольно низкая. Для лучшей поддержки браузера то же самое можно имитировать с помощью свойства background-image.

input {
  border-image-source: linear-gradient(rgba(0, 51, 102, 0.5), rgba(0, 0, 51, 0.5));
  border-width: 5pt;
  border-image-slice: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" />

person Harry    schedule 10.10.2015
comment
Большое спасибо! Для ответа и ссылки на кросс-браузерную совместимость. Это именно то, что мне было нужно! :) - person BernardoLima; 10.10.2015
comment
@BernardoLima: Рад быть полезным :) - person Harry; 10.10.2015
comment
Как сделать радиус границы? потому что border-radius: 15px; не работает - person Alex Zab; 01.09.2020