Можно ли как-то применить градиент к border
?
Желательно что-нибудь попроще, если такое конечно есть...
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот один из вариантов:
div {
border-width: 3px;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}
<div style="width: 50px; height: 50px; background: #eee"></div>
взято из CSS tricks
Там много альтернатив.