Градиент на правой стороне только с новым синтаксисом градиента webkit, также какие браузеры поддерживают это, и как это сделать в них? - PullRequest
6 голосов
/ 16 октября 2011

На любые другие вопросы, связанные с этим, либо есть ответы, содержащие синтаксис OLD webkit, но не новый синтаксис, либо они не объясняют, как применить градиент границы ТОЛЬКО к одной стороне.

Какие браузеры поддерживаютградиентные границы через CSS без использования изображений?

У меня есть пример в JsFiddle ниже, он показывает, что градиент применяется ТОЛЬКО к правой границе, как бы я сделал этот кросс-браузер совместимым со всеми браузерами, которыев настоящее время поддерживает CSS градиенты границы?Я полагаю, что в моем примере градиентный синтаксис - это старый синтаксис, используемый webkit, он обновил синтаксис год или около того назад, и я думаю, что я хотел бы использовать новый синтаксис, но я терпел неудачу при каждой попытке.Я не понимаю, что в синтаксисе говорит, что градиент должен применяться ТОЛЬКО к правой стороне, я пытался настроить числа, но я просто не понимаю, что делает это.Спасибо огромное.

http://jsfiddle.net/nicktheandroid/MNax7/1/


Кроме того, у меня есть еще один пример ниже, он использует новый синтаксис CSS-градиента, который используют все браузеры, но градиент применяется ко всем границам, яхотел, чтобы он применялся ТОЛЬКО к правой границе, как в примере выше.

http://jsfiddle.net/nicktheandroid/b875w/2/

Ответы [ 2 ]

5 голосов
/ 16 октября 2011

Вам нужны значения, относящиеся к толщине границ в вашем коде:

 0 100% 0 0/0 15px 0 0 stretch;

Первые четыре числа являются активациями градиента для четырех границ (вверху, справа, внизу, слева), поэтому вправоГраница установлена ​​на 100%, в то время как остальные деактивированы.

Четыре числа после / являются шириной границ, очевидно, что сверху, снизу и слева установлено значение 0 ширины, а справа - 15 пикселей.

Параметр растяжения указывает градиенту растягивать весь путь длины границы, другой параметр - круглый, но он больше используется с реальными изображениями (image.jpg), чтобы решить, следует ли повторять изображение или растягивать егодлина.Я не знаю, доступны ли еще дополнительные опции ..

Вот обновленная демонстрация , использующая ваш новый синтаксис с активированной только правой границей.

0 голосов
/ 25 марта 2016

Установите image-slice:1 для ваших div' s css свойств.

...