Границите са от решаващо значение при уеб дизайна/разработката, тъй като могат да привлекат вниманието към потребителите или да отделят съдържание в уеб страница. Можете да използвате стенограмата за граница, когато искате и четирите граници на HTML елемент да бъдат еднакви.
От друга страна, можете също да използвате свойствата цвят на рамката, стил на граница и ширина на границата, за да направите всяка рамка различна/уникална. Когато искате да посочите цвета на рамката, ние използваме цвят на границата, използваме ширина на границата, за да определим ширината на границата и указваме дали границата ще бъде прекъсната, двойна или плътна, като използваме свойството border-style.
Можете също така да насочвате към отделни граници, като използвате свойства като border-block-start и border-top
Двойна рамка е, когато две успоредни линии ограждат HTML елемент. Двете линии са разделени от празнина, която може да бъде оставена прозрачна или запълнена с изображение или фонов цвят.
Например, можем да имаме бутон за регистрация/влизане, заобиколен от двойна рамка.
Съдържание
Защо двойна граница?
- Разделяне: Можете да използвате двойна рамка, за да увеличите четливостта и възможността за сканиране на уеб страница, като разделяте различни HTML елементи. Например, можете да имате двойни граници, за да разделяте елементи като заглавки, основни и долни колонтитули на уеб страница.
- Визуална привлекателност: Можете да използвате различни/контрастни цветове върху двойните граници, за да направите различните елементи визуално по-привлекателни.
- Показване на йерархия: Можете ясно да разграничите важните от по-маловажните елементи на уеб страница, като използвате двойни рамки.
- Лесно персонализиране: Можете да създавате персонализирани и уникални дизайни с помощта на двойни рамки. Например, можете да промените цвета или ширината на всяка линия.
- Акцент: Използвайки свойството двойна граница, можете да привлечете вниманието към конкретни връзки или бутони на уеб страница.
Можете да използвате следните начини за създаване на двойна рамка в CSS.
Използване на свойство в стил граница
Свойството border-style задава стила на четирите граници на елемент. Използваме ключовата дума double, за да зададем стила в този случай. Когато използваме ключовата дума double, автоматично се създава подложка между двете граници.
За демонстрационни цели ще зададем ширината на рамката на 15px. Също така ще изберем цвета на границата да бъде червен и ще посочим стила на границата като двоен.
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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
CSS код:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
Резултатът ще бъде:
Използване на функцията linear-gradient().
Тази функция задава линеен градиент като фоново изображение. Резултатът е постепенен преход между два цвята по права линия. Използваме ключовата дума to, за да маркираме началната точка на градиентната линия. Ако редът не е определен, стойността по подразбиране е най-долу.
Кодът по-долу дава на нашата кутия ширина на границата 7px. След това можем да посочим линейния градиент върху свойството на фона на всяка страна на кутията.
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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
CSS код:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
Резултатът ще бъде:
Използване на свойство Outline
Очертание е линия, начертана извън границата на елемент. Това постига ефекта на двойната граница и можем да използваме контур и единична граница. Трябва да използваме outline-offset, за да добавим интервал между свойствата на границата и контура.
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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
CSS код:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
Изобразената страница ще се появи, както следва:
Използване на свойството box-shadow
Свойството box-shadow добавя ефект на сянка около рамката на елемент. Можете да имате няколко ефекта на сянка на кутия, разделени със запетаи. Започнете, като се уверите, че настройките за отместване и замъгляване са нула, и след това задайте правилните размери на сенките.
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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
CSS код:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
Изобразената страница ще се появи, както следва:
Използване на свойството background-clip
Свойството background-clip определя колко далеч трябва да се простира фонът в елемент. Разширението може да бъде в полето за граници, полето за подплънки или полето за съдържание.
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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
CSS код:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
Изобразената страница ще се появи, както следва:
Използване на псевдо елементи
Псевдоелементите, представени от селектори ::before и ::after, позволяват на уеб дизайнерите да стилизират части от 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
Изобразената страница ще се появи, както следва:
Примери от реалния свят за CSS с двойна граница
CSS свойството с двойна граница се използва в много уебсайтове. Трябва да комбинирате свойство за двойна граница с други свойства на CSS, за да извлечете най-доброто от него. Следват два примера за двойна рамка в действие;
Бутонът „Количка“ в Amazon
Amazon е едно от най-големите имена в пространството за електронна търговия. Неговият бутон за количка има CSS с двойна рамка за визуална естетика и подканва потребителите да действат.
Двойните граници се появяват, когато потребител задържи курсора на мишката над бутона „количка“. Границите също се виждат, когато задържите курсора на мишката върху навигационното меню на Amazon.
Бутони на Mailchimp
Mailchimp е услуга за имейл маркетинг, която позволява на потребителите да създават, стартират и проследяват кампании. Неговият уебсайт използва ефекти на двойни граници в различни секции. Бутоните за регистрация и влизане имат двойни граници, за да „създадат“ усещане за неотложност, докато потребителите разглеждат.
Рамката от долната страна на тези бутони се удебелява, когато потребителят прекара курсора през тях.
Най-добри практики при използване на CSS ефект с двойна граница
Лесно е да се увлечете, когато използвате двоен CSS. Крайната цел е да гарантирате, че потребителите лесно навигират и да подчертаете основните области на вашия сайт. Следвайте тези най-добри практики:
- Използвайте последователен стил: Ако използвате двойни граници, уверете се, че стилът е последователен за всички елементи. Например двойни рамки могат да се използват върху бутоните за навигация, призив за действие и бутони за регистрация/влизане. Ако е възможно, уверете се, че имате едни и същи цветове и дебелини на полета в елементите с двойни граници.
- Уверете се, че тези двойни граници работят на различни устройства: Живеем в свят, в който хората разглеждат уебсайтове от смартфони, компютри и таблети. Тествайте, за да се уверите, че двойните рамки се показват според очакванията на различни размери на екрана.
- Използвайте ги пестеливо: Може да се изкушите да прекалите с определен CSS ефект, след като го откриете за първи път. Двойният CSS обаче отговаря на различни елементи на уеб страница. Използвайте това свойство само в области, където добавя стойност към дизайна.
Заключение
Подчертахме основните подходи, които можете да използвате, за да създадете двойна рамка в CSS. Изборът на подход ще зависи от това какво искате да постигнете с двойната граница и вашите предпочитания. Можете да решите да се придържате към един или комбинация от няколко стила с двойна рамка на една и съща страница.
Можете да разгледате тези CSS ресурси, за да разберете подробно каскадните стилови таблици.