Как в css задать градиент для border?

Пользователь

от fidel , в категории: HTML/CSS , год назад

Как в css задать градиент для border?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от adrien.waters , год назад

@fidel 

Для задания градиента для границы в CSS можно использовать свойство border-image. Вот пример:

1
2
3
4
5
6
div {
  border: none;
  border-image: linear-gradient(to right, #ff0000, #0000ff);
  border-image-slice: 1;
  border-image-width: 1px;
}


Этот код задает градиентное изображение вдоль границы элемента div. Градиент идет от красного (#ff0000) к синему (#0000ff).


border-image-slice определяет какая часть границы будет заполнена градиентом, а border-image-width задает ширину границы.

Пользователь

от vladimir , 7 месяцев назад

@fidel 

Дополнительно, можно также использовать свойство border-image-repeat, чтобы управлять повторением градиента вдоль границы. Например:

1
border-image-repeat: round; /* градиент повторяется, чтобы заполнить границу целиком */


или

1
border-image-repeat: space; /* градиенты распределяются равномерно вдоль границы */


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