Как да добавите Border Gradient в CSS [+3 Tools]

Свойството border в CSS позволява на уеб дизайнерите да определят стила, ширината и цвета на границите на даден елемент.

В CSS градиентът позволява на дизайнера да приложи плавен преход между два или повече цвята. Можете да използвате градиенти, за да създадете визуални ефекти като засенчване, смесване на цветове и текстура върху елементите на вашата уеб страница.

Border gradient е свойство на CSS, което позволява на разработчиците да прилагат градиент към границата на елемент.

Градиентната граница създава визуален ефект, при който цветът на рамката се променя от един цвят в друг.

Съдържание

Защо да използвате градиентна рамка?

Градиентите на границите бяха сред различните функции за стилизиране, които бяха въведени в CSS3. Това са някои от причините, поради които трябва да го имате в следващото си уеб приложение:

Граничният градиент е гъвкав: можете да създавате сложни и многослойни ефекти, като използвате градиентни граници. Това е за разлика от плътните цветни граници, които са твърди. Следователно градиентните граници са полезни, когато се работи със сложни оформления или форми, които изискват нюансиран визуален дизайн.
Създайте визуална привлекателност: Използвайки ефекта на градиентната граница, можете да добавите привлекателни визуални ефекти към вашите дизайни. Например, можете да използвате удебелени цветови контрасти, за да привлечете вниманието към конкретен елемент на вашата уеб страница.
Осигурете безпроблемна интеграция: Градиентните граници ви позволяват безпроблемно да интегрирате границата във фона на вашия елемент. Такъв подход придава на вашата уеб страница солиден и сплотен вид, показващ добре обмислен дизайн.

Как да добавите Border Gradient в CSS

Преди да демонстрираме как се добавя градиент на граница, можем да илюстрираме как се добавя граница към HTML елемент.

Можем да използваме този код;

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

    <title>Document</title>

</head>

<body>

      <div class="box contains-border">

        How to add a Border illustrated!!!

      </div>    

</body>

</html>

CSS

.box {

  width: 400px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.contains-border {

  border-color: rebeccapurple;

  border-style: solid;

  border-width: 5px;

}

Изобразената страница ще изглежда като:

Как да използвате незабавна точка за достъп на вашия iPhone, iPad или Mac

Въпреки че горният код има рамка, той не е толкова привлекателен за очите, тъй като е празен. Имаме само 5px плътна лилава граница Rebecca около нашия div.

Можем да направим нашата граница привлекателна, като използваме градиенти на границата. Съществуват различни подходи за добавяне на граничен градиент. Следните са някои от основните:

Използване на градиентни граници (линеен градиент, радиален градиент, коничен градиент)

Ще илюстрираме как да използвате градиентни граници по три различни начина:

Линеен градиент

Линеен градиент създава плавен преход между два или повече цвята в права линия. Можем да използваме следния код, за да демонстрираме:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Linear Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box linear-gradient">

        Linear Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.linear-gradient {

  border-style: solid;

  border-width: 10px;

  border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;

}

Посочили сме стила на границата като плътен, което означава, че границата около нашата кутия е плътна линия. Ширината на рамката на нашия код е 10px.

Линейният градиент започва с rgb(143, 55, 0)“ и завършва с „rgb(66, 228, 250)“. Посочили сме и ъгъл от 45 градуса. Ширината на среза на изображението на рамката е зададена на „1“.

Изобразената страница ще изглежда като:

Радиален градиент

Радиалният градиент създава кръгъл градиент, излъчващ се от централна точка, което позволява на потребителите да преминават от един цвят към друг в елемента на уеб страницата.

Можем да илюстрираме как да добавим радиален градиент с помощта на този код:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Radial Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box radial-gradient">

        Radial Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.radial-gradient {

  border-style: solid;

  border-width: 5px;

  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;

}

Задали сме стила на границата на нашия елемент като плътен. Също така сме дали на нашата граница ширина на границата от 5px.

Радиалният градиент започва с тъмно зелено RGB(0,143,104) и завършва с ярко жълто, обозначено с rgb(250,224,66).

„1“ в края на кода представлява свойството за повторение на border-image. Тази стойност инструктира браузъра да повтори изображението на границата само веднъж около границата на елемента.

Как да направите екранна снимка в Ubuntu (5 лесни начина)

Изобразената страница ще изглежда като:

Коничен градиент

Коничният градиент създава кръгъл цветен преход. При този ефект преходът започва от централна точка и след това се разпространява навън, образувайки кръгъл ефект.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Conic Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box conic-gradient">

        Conic Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.conic-gradient {

  border-style: solid;

  border-width: 7.5px;

  border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;

}

В този код задаваме стила на рамката като плътен и даваме на рамката ширина от 7,5 пиксела. Свойството border-image задава градиента на границата. Има седем цвята, започващи с червено и завършващи с rgb(255, 0, 38).

Фигура ‘1’ в края на кода дава ширина на границата от 1 пиксел.

Изобразената страница ще изглежда като:

Използване на гранични изображения

Изображенията на границите заместват стандартните плътни граници на HTML елементите. Изображенията на границите се използват за създаване на сложни дизайни, вместо да се комбинират цветове за създаване на градиент на граница.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Border Images Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box border-images">

        Border Images Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.border-images {

  border-style: solid;

  border-width: 15px;

  border-image-source: url(/images/elephant-2910293_1920.jpg);

  border-image-slice: 60 30;

}

Дадохме на свойството border-width ширина от 15px и зададохме border-style като плътен.

Секцията border-image-slice задава ширината и височината на рамката съответно на 60% и 30%.

Изобразената страница ще изглежда като:

Използване на стенографско свойство

Съкратеното свойство позволява на разработчиците да стилизират множество отделни CSS свойства, като използват един ред код. В този случай използваме border-image, за да посочим border-image-source и border-image-slice.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Shorthand Property Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box shorthand">

        Shorthand Property Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.shorthand {

  border-style: solid;

  border-width: 15px;

  border-image: url(/images/elephant-2910293_1920.jpg) 60 30;

}

Изобразената страница ще изглежда като:

CSS градиентни генератори на граници

Генераторите на CSS граници на градиенти помагат на разработчиците да добавят градиентни ефекти върху елементи на уеб страница. Тези генератори ви позволяват да коригирате настройките, което означава, че не е нужно да създавате всичко от нулата. Следните са някои от инструментите, които можете да използвате:

Как да вмъкнете текстово поле в Google Документи

#1. Генератор на CSS градиенти – Преобразуване на цветове

Преобразуването на цветове ви позволява да генерирате CSS код с линеен или радиален градиент с до пет цвята. CSS градиентният код, който генерирате, може да се използва като граница на елемент или фоново изображение.

Можете да направите следното с този генератор;

Изберете до пет цвята и ги използвайте в градиента на границата.
Изберете посоката на градиента. Инструментът има както линейни, така и радиални градиенти.
Можете да решите как да се случи преходът на цветовете, като използвате функцията за спиране на цветовете.

След като приключите с експериментирането и генерирането на кода, можете да го копирате и използвате на уебсайта си.

#2. CSS Border Gradient Generator-Неизползван CSS

Unused-CSS помага на разработчиците да генерират градиентни граници, които могат да прилагат към блокови елементи, без да създават псевдоелементи или допълнителни елементи.

Можете да направите следното;

Изберете между различни типове градиенти. Можете лесно да превключвате между радиални и линейни градиенти, когато работите с този инструмент.
Раздел Визуализация. Инструментът ви позволява да визуализирате как градиентът на границата ще изглежда на вашата уеб страница, докато я персонализирате.
Цветът спира. Този инструмент улеснява решаването как ще се извършват преходите за различните цветове.
Персонализиране на размера на рамката. Можете лесно да персонализирате размера и радиуса на границата с този инструмент.

След като сте доволни от генерирания код, можете да го копирате и използвате във вашия проект.

#3. Генератор на градиентни граници – Амит Шийн

Този инструмент има осем различни фонови области, което позволява на разработчиците да създават заоблени градиентни гранични ефекти.

Можете да постигнете следното;

Създавайте градиентни анимации. Инструментът ви позволява да генерирате градиентни анимации, които преминават между два или повече цвята.
Можете да включите JavaScript код. Ако вашият персонализиран елемент се нуждае от JS код, винаги можете да го намерите и персонализирате от контролния панел.
Преглед на живо. Можете да видите промените във вашия код, докато го персонализирате.

Можете да копирате и поставите кода, след като персонализирате ефектите на градиента на границата по ваш вкус.

Заключение

Когато проектирате вашите уеб страници, можете да използвате който и да е от горните подходи, за да добавите градиентна рамка към вашите елементи. Изборът на подход може да варира в зависимост от предпочитанията, нивото на умения и естеството на елемента, който оформяте.

Можете също така да използвате различни подходи за различни елементи на една и съща уеб страница.

Вижте как да създадете двойна рамка в CSS, за да подобрите визуалната привлекателност на вашата уеб страница.