Межі мають вирішальне значення у веб-дизайні/розробці, оскільки вони можуть привернути увагу користувачів або розділити вміст на веб-сторінці. Ви можете використати скорочення рамки, якщо хочете, щоб усі чотири межі елемента HTML були однаковими.
З іншого боку, ви також можете використовувати властивості кольору рамки, стилю рамки та ширини рамки, щоб зробити кожну рамку іншою/унікальною. Якщо ви хочете вказати колір рамки, ми використовуємо колір рамки, ширину рамки, щоб визначити ширину рамки, і вказуємо, чи буде межа пунктирною, подвійною чи суцільною за допомогою властивості border-style.
Ви також можете націлити окремі рамки за допомогою таких властивостей, як border-block-start і border-top
Подвійна рамка – це коли дві паралельні лінії оточують елемент HTML. Дві лінії розділені проміжком, який можна залишити прозорим або заповнити зображенням або фоновим кольором.
Наприклад, у нас може бути кнопка реєстрації/входу, оточена подвійною рамкою.
Чому подвійна рамка?
- Розділення: Ви можете використовувати подвійну рамку, щоб покращити читабельність і можливість сканування веб-сторінки шляхом розділення різних елементів HTML. Наприклад, ви можете мати подвійні рамки для розділення таких елементів, як верхні, основний і нижні колонтитули на веб-сторінці.
- Візуальна привабливість: ви можете використовувати різні/контрастні кольори на подвійних рамках, щоб зробити різні елементи візуально привабливішими.
- Показати ієрархію: за допомогою подвійних рамок можна чітко розрізнити важливі та менш важливі елементи на веб-сторінці.
- Просте налаштування: ви можете створювати персоналізовані та унікальні дизайни за допомогою подвійних рамок. Наприклад, ви можете змінити колір або ширину кожної лінії.
- Акцент: за допомогою властивості подвійної рамки ви можете привернути увагу до певних посилань або кнопок на веб-сторінці.
Ви можете використовувати наступні способи створення подвійної рамки в CSS.
Використання властивості border-style
Властивість border-style встановлює стиль чотирьох рамок елемента. У цьому випадку ми використовуємо ключове слово double, щоб встановити стиль. Коли ми використовуємо ключове слово double, автоматично створюється відступ між двома межами.
Для демонстрації ми встановимо ширину рамки на 15 пікселів. Ми також виберемо червоний колір рамки та вкажемо стиль рамки як подвійний.
код 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, щоб позначити початкову точку лінії градієнта. Якщо порядок не вказано, значенням за замовчуванням є низ.
У наведеному нижче коді наша коробка має ширину межі 7 пікселів. Потім ми можемо вказати лінійний градієнт у властивості фону кожної сторони прямокутника.
код 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, щоб додати пробіл між властивостями border і outline.
код 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, щоб детально зрозуміти каскадні таблиці стилів.