HTML:
HTML код во всех примерах одинаковый
|
1 |
<div class="img-border"></div> |
Линейный градиентный фон:
CSS:
|
1 2 3 4 |
.img-border { border: 20px solid; border-image: linear-gradient(#337AB7, #BFE2FF) 1; } |
Повторяющийся линейный градиентный фон:
CSS:
|
1 2 3 4 |
.img-border { border: 20px solid; border-image: repeating-linear-gradient(45deg, #BFE2FF, #337AB7 20px) 45; } |
Радиальный градиентный фон:
CSS:
|
1 2 3 4 |
.img-border { border: 20px solid; border-image: radial-gradient(#337AB7, #BFE2FF) 1; } |
Повторяющийся радиальный градиентный фон:
CSS:
|
1 2 3 4 |
.img-border { border: 20px solid; border-image: repeating-radial-gradient(#fff, #fff 5px, #BFE2FF 5px, #337AB7 10px) 20; } |
Графический фон:
CSS:
|
1 2 3 4 |
.img-border { border: 20px solid; border-image: url("/demo/site-bg/f-95.jpg") 60 30; } |
Конический градиентный фон:
Поддерживается не всеми браузерами, например мозиллой
CSS:
|
1 2 3 4 |
.img-border { border: 20px solid; border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1; } |
Добрый вечер.
С ним не работает border-radius, или можно как-то совместить?
Вложить в контейнер и закруглить его
Уже поддерживается, это я про конический градиентный фон, у меня по крайней мере работает.
Очень круто! И вкус, и техническая реализация. Благодарю!