Градиент css border: Градиентные границы в CSS / Хабр

Градиент границы | Webflow University

Домашний урок

Все уроки

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

layout-design

В этом видео старый пользовательский интерфейс. Скоро будет обновленная версия!

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

В этом уроке вы узнаете:

1. Как создать кнопку
2. Как применить границу линейного градиента
3. Как подобрать цвет кнопки к цвету страницы
4. Как закруглить кнопку

Как создать кнопку

Давайте сначала создадим кнопку и добавим текст призыва к действию.

Чтобы создать структуру кнопки:

1. Перетащите блок ссылок из панели Add на холст Webflow
2. Добавить текстовый блок внутри блока ссылок
3. Дважды щелкните текст по умолчанию, чтобы изменить его (например, «Свяжитесь с нами»)

Давайте настроим размер кнопки:

1. Выбрать текст блок
2. Открыть Панель стилей > Интервал
3. Добавить верхний и нижний отступы по 15 пикселей, а также левый и правый отступы из 30 пикселей

9 0002 Узнайте больше об отступах в нашем уроке по интервалам.

Полезно знать : Чтобы одновременно увеличить или уменьшить поля или отступы на дополнительных сторонах элемента, используйте Option + перетаскивание мышью (на Mac) или Alt + перетаскивание мышью (в Windows).

Как применить рамку с линейным градиентом

Теперь вы можете добавить рамку с цветовым градиентом к пользовательской кнопке.

Чтобы добавить градиент к блоку Link:

1. Выберите блок Link
2. Открыть Панель стилей > Фоны
3. Нажмите значок «плюс» справа от Изображение и градиент и выберите Линейный градиент в качестве Введите .  
4. Изменить Угол градиента на шкале направления (например, 90 градусов)
5. Щелкните в любом месте на полосе градиента, чтобы добавить точку 
6. Щелкните образец цвета под полосой градиента, чтобы выбрать цвет для градиентная остановка

Вы можете добавить столько точек и цветов, сколько хотите — это создаст градиент. Узнайте больше о фоновых градиентах.

Как подобрать цвет кнопки к цвету страницы

Вы можете согласовать текстовый блок и фон страницы, чтобы сделать кнопку прозрачной:

1. Выбрать текстовый блок
2. Открыть Панель стилей > Фоны 9 0037
3. Щелкните образец , чтобы открыть палитру цветов, и выберите цвет, соответствующий цвету основного текста страницы (например, «белый») 

Как закруглить кнопку

Теперь вы можете закруглить края кнопки:

1. Выберите Блок ссылок
2. Открыть Панель стилей > Интервал
3. Добавьте отступ к каждому из четыре стороны блока ссылок (например, , 3 пикселя)
4. Выберите текстовый блок
5. Откройте Панель стилей > Границы и увеличьте радиус (например, 50 пикселей)
6. Выберите блок ссылок 90 020
7. Откройте панель стилей > Границы и увеличьте радиус (например, 50 пикселей)

Готово! Теперь у вас есть потрясающая пользовательская градиентная рамка!

Содержание

Свойство CSS: border-image: « | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д. Могу ли я использовать

Поиск ?

Свойство CSS: border-image: `

<градиент>`

• Глобальное использование

  95,92% + 0% «=» 95,92%

IE

1. 6–10: не поддерживается
2. 11: поддерживается

Edge

1. 12–113: поддерживается
2. 11 4: поддерживается

Firefox

1. 2–28: не поддерживается
2. 29 — 112: поддерживается
3. 113: поддерживается
4. 114 — 115: поддерживается

Chrome

1. 4–6: не поддерживается
2. 34% — Supported»> 7–113: поддерживается
3. 114: поддерживается
4. 115–117: поддерживается

Safari

1. 3.1–3 .2: Не поддерживается
2. 4 — 16.4: Поддерживается
3. 16.5: Поддерживается
4. 16.6 — TP: Поддерживается

Opera

1. 10 — 12.1: Не поддерживается
2. 15 — 98: Поддерживается
3. 99: Поддерживается
9 0027

Safari на iOS

1. 3.2–16.4: поддерживается
2. 16.5: Поддерживается
3. 16.