Я пытаюсь применить градиент к границе, я думал, что это так же просто, как сделать это:
border-color: -moz-linear-gradient(top, #555555, #111111);
Но это не работает.
Кто-нибудь знает, как правильно сделать градиенты границы?
WebKit теперь (и Chrome 12 по крайней мере) поддерживает градиенты как изображение границы:
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
Prooflink - http://www.webkit.org/blog/1424/css3-gradients/
Поддержка браузера: http://caniuse.com/#search=border-image
вместо границ я бы использовал фоновые градиенты и отступы. такой же внешний вид, но гораздо проще, больше поддерживается.
простой пример:
РЕДАКТИРОВАТЬ: Вы также можете использовать
:before
селектор, как @WalterSchwarz указал:источник
border-image-slice
расширит градиент CSS-изображения границыЭто (насколько я понимаю) предотвращает разделение «изображения» по умолчанию на части - без него ничего не появляется, если граница находится только на одной стороне, а если вокруг всего элемента, в каждом углу появляются четыре крошечных градиента.
источник
border-radius
, border-radius игнорируется :(- https://developer.mozilla.org/en/CSS/-moz-linear-gradient
- http://www.cssportal.com/css3-preview/borders.htm
источник
Попробуйте это, отлично работает на веб-кит
источник
Это хак, но в некоторых случаях вы можете добиться этого эффекта, используя background-image для указания градиента, а затем маскируя реальный фон с помощью тени. Например:
От: http://blog.nateps.com/the-elusive-css-border-gradient
источник
Попробуйте это, у меня получилось.
Ссылка на скрипку https://jsfiddle.net/yash009/kayjqve3/1/ надеюсь, это поможет
источник
Я согласен со szajmon. Единственная проблема с ответами его и Квентина - это кросс-браузерная совместимость.
HTML:
CSS:
источник
filter
поддерживайте IE для такой мелочи, просто используйте сплошную границу.!important
. Теперь, Alohci, твоя очередь объяснять, почему тоже :)Webkit поддерживает градиенты в границах и теперь принимает градиент в формате Mozilla.
Firefox утверждает, что поддерживает градиенты двумя способами:
IE9 не имеет поддержки.
источник
Попробуйте приведенный ниже пример:
источник
Еще один способ достижения такого же эффекта - использование нескольких фоновых изображений, функция, которая поддерживается в IE9 +, обновленном Firefox и большинстве браузеров на основе WebKit: http://caniuse.com/#feat=multibackgrounds
В IE6-8 также есть несколько вариантов использования нескольких фонов: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/
Например, предположим, что вы хотите левую границу шириной 5px, которая представляет собой линейный градиент от синего к белому. Создайте градиент как изображение и экспортируйте в PNG. Перечислите любые другие фоны CSS после одного для градиента левой границы:
Вы можете адаптировать эту технику к градиентам верхней, правой и нижней границ, изменяя часть положения фона для
background
свойства сокращения.Вот jsFiddle для данного примера: http://jsfiddle.net/jLnDt/
источник
Градиентные границы от Css-Tricks: http://css-tricks.com/examples/GradientBorder/
источник
Для кросс-браузерной поддержки вы можете попробовать имитировать градиентную границу
:before
или:after
псевдоэлементы, в зависимости от того, что вы хотите сделать.источник
Пример для градиентной границы
Использование свойства border-image css
Кредиты для: border-image в Mozilla
источник
попробуй этот код
или, может быть, обратитесь к этой скрипке: http://jsfiddle.net/necolas/vqnk9/
источник
Вот хороший полу-кросс-браузерный способ иметь градиентные границы, которые исчезают на полпути вниз. Просто установив цветовой стоп в
rgba(0, 0, 0, 0)
Использование объяснил:
Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
источник
Есть хорошая статья об уловках CSS здесь: https://css-tricks.com/gradient-borders-in-css/
Я смог придумать довольно простое, одноэлементное решение для этого, используя несколько фонов и свойство background-origin.
Преимущества этого подхода:
Проверьте это: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100
источник