2

Можно ли как-то применить градиент к border?

Желательно что-нибудь попроще, если такое конечно есть...

1
  • А разве border-color не работает с градиентом?
    – pepel_xD
    28 июн 2016 в 20:20

1 ответ 1

3

Вот один из вариантов:

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

Там много альтернатив.

1
  • Видел этот вариант... Но я слышал, что он не работает при border-radius. 29 июн 2016 в 9:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.