Страницы

Поиск по вопросам

суббота, 11 апреля 2020 г.

Как в CSS задать градиент для border?

#стиль

                    
Всем привет!
Вот к примеру для для фона градиента надо писать:

background: linear-gradient(to left, #FFF, #CACACA);


А как задать градиент к примеру для border-left: ?
    


Ответы

Ответ 1



Функции градиента работают как изображения, поэтому их надо применять там, где требуется подставить изображения. Для рамки это будет border-image, как-то так: div { border-width: 10px; border-style: solid; border-image: linear-gradient(to left, #ff0000, #0000ff) 0 0 0 100%; }
for ru.stackoverflow


Ответ 2



.b-gradient{ font-size: 15px; max-width: 300px; padding: 15px; margin: 25px auto; position: relative; padding-left: 15px; } .b-gradient:before{ content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 8px; } .b-gradient-vertical:before{ background: rgb(255,0,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(0,0,255,1) 50%, rgba(0,0,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */ } .b-gradient-gorizontal:before{ background: rgb(255,0,0); /* Old browsers */ background: -moz-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(0,0,255,1) 50%, rgba(0,0,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 */ } .b-gradient-radial:before{ background: rgb(255,0,0); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(0,0,255,1) 50%, rgba(0,0,255,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
А как задать градиент к примеру для border-left: ? А как задать градиент к примеру для border-left: ?
А как задать градиент к примеру для border-left: ? А как задать градиент к примеру для border-left: ?
А как задать градиент к примеру для border-left: ? А как задать градиент к примеру для border-left: ?


Комментариев нет:

Отправить комментарий