GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

Ночной режим
GRAVITSAPA.info - интересный блог

Делаем простым способом градиент для border на CSS, Simple Gradient Borders in CSS

72 просмотров Создание сайтов Нет комментов » 29 Янв 2020

Сразу приведу пару примеров, что бы могли сразу использовать…

Предположим есть <div></div> контейнер. Сделаем ему сверху border с градиентом на CSS:

<style>
.border-grad1 {
width: 300px;
height: 30px;
border-top: 4px solid;
background: #cfcfcf;
border-image: linear-gradient( to right, #ff0000, #1000ff ) 1 0%;
}
</style>
<div class="border-grad1"></div>

В следующем примере border будет со всех сторон блока. Что бы в таком случае сделать градиент, понадобится немного другая конструкция CSS стилей

<style>
.border-grad2 {
width: 292px;
height: 30px;
border: 4px solid transparent;
background: linear-gradient(#cfcfcf,#cfcfcf) padding-box, linear-gradient(to right, #ff0000 0%, #1000ff 100%) border-box;
}
</style>
<div class="border-grad2"></div>

Можно ещё играться с направлением градиента. Например направление «to right» изменим на «to top right» и получим диагональное направление

<style>
.border-grad3 {
width: 292px;
height: 30px;
border: 4px solid transparent;
background: linear-gradient(#cfcfcf,#cfcfcf) padding-box, linear-gradient(to top right, #ff0000 0%, #1000ff 100%) border-box;
}
</style>
<div class="border-grad3"></div>

Заметили, возле кодов цветов градиента стоят значения «0%» и «100%»? Этими цифрами можно устанавливать плавность перехода цвета к цвету, а так же смещение цветов в одну или другую сторону.

Надеюсь этой информации хватит, что бы сделать любой градиент для border на чистом CSS!

Оставь свой коммент

Наверх