Как в css задать градиент для border?
2 ответа
от
adrien.waters ,
9 месяцев назад
@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 ,
2 месяца назад
@fidel
Дополнительно, можно также использовать свойство border-image-repeat, чтобы управлять повторением градиента вдоль границы. Например:
1
|
border-image-repeat: round; /* градиент повторяется, чтобы заполнить границу целиком */ |
или
1
|
border-image-repeat: space; /* градиенты распределяются равномерно вдоль границы */ |
Помните, что поддержка градиентов для границ может быть ограничена в некоторых браузерах, и в некоторых случаях могут потребоваться дополнительные вендорные префиксы.
15