border с помощью маски
На вход у нас идет изображение, и как можно через маску дать ей градиентный бордер, да знаю что можно через border-image и border transparent но в моем случае это не подходит так как с бека приходит только картинка и нельзя дать ей родителя. Как и псевдоэлемент, так как img не может с ними работать
Ответы (1 шт):
Автор решения: ValentynDi
→ Ссылка
Нужно сгенерировать svg рамки нужного размера и сделать на подобии как в примере ниже(при условии, что вы можете поставить gradient на background блока)
-webkit-mask-image: url(http://yoksel.github.io/Sandbox/img/tiles/tile-transparent-black.png);
-webkit-mask-repeat: space;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
Если border 1px я бы советовал градиентом пренебречь и воспользоваться старым-добрым outline:
outline: 1px solid #87b7bc;
outline-offset: -10px;