Межі¶

У модулі моделі блоку ми розглянули аналогію з кадром для опису кожного розділу моделі блоку.

Кордон блоку — це рамка ваших блоків, а властивості border надають величезну кількість можливостей для створення цієї рамки практично в будь-якому стилі, який можна придумати.

Властивості кордону¶

Окремі властивості border дають можливість стилізувати різні частини кордону.

Стиль¶

Для того, щоб з'явився кордон, необхідно визначити border-style. Є кілька варіантів на вибір:

При використанні стилів ridge , inset , outset та groove браузер затемнює колір кордону для другого показаного кольору, щоб забезпечити контраст та глибину. Ця поведінка може відрізнятись у різних браузерах, особливо для темних кольорів, таких як black. У Chrome ці стилі кордонів будуть виглядати суцільними, а Firefox вони будуть освітлюватися, щоб потім забезпечити темніший другий колір.

Поведінка браузерів може відрізнятися і для інших стилів кордонів, тому важливо протестувати свій сайт у різних браузерах. Частим прикладом такої різниці є те, як кожен браузер відображає стилі dotted та dashed.

Кордони відображаються у браузерах Chrome, Firefox та Safari.

Для встановлення стилю кордонів на кожній стороні блоку можна використовувати border-top-style, border-right-style, border-left-style та border-bottom-style.

Скорочення¶

Як і у випадку з margin і padding , визначення всіх частин кордону щодо одного оголошенні можна використовувати скорочене властивість border .

Порядок значень скорочення border наступний: border-width , border-style і потім border-color .

Колір¶

За допомогою команди border-color можна встановити колір для всіх сторін блоку або кожної окремої сторони. За промовчанням використовується поточний колір блоку: currentColor . Це означає, що якщо ви оголосите лише властивості кордону, наприклад ширину, то кольором буде це обчислене значення, якщо ви не поставите його явно.

Щоб задати колір кордону на кожній стороні блоку, використовуйте border-top-color , border-right-color , border-left-color та border-bottom-color .

Ширина¶

Ширина кордону – це товщина лінії, яка визначається параметром border-width. За замовчуванням ширина кордону дорівнює середньої. Однак вона не буде видно, доки ви не визначите стиль. Можна використовувати інші іменовані значення ширини, наприклад thin і thick .

Властивості border-width також приймають одиниці вимірювання довжини, такі як px, em, rem або %. Щоб задати ширину кордону з кожної сторони блоку, використовуйте властивості border-top-width , border-right-width , border-left-width та border-bottom-width .

Логічні властивості¶

У модулі Логічні властивості ви дізналися, як посилатися на блоковий та інлайн-потік, а не на явні верхню, праву, нижню чи ліву сторони.

Така можливість є і в межах:

У даному прикладі у .my-element усі сторони мають пунктирну межу розміром 2px, яка є кольором поточного тексту. Кордон inline-end визначається як 2px, суцільна та червона. Це означає, що в мовах з ліво-правим розташуванням літер, наприклад, англійською, червона межа перебуватиме праворуч блоку. У мовах з переходом праворуч наліво, наприклад арабською, червона межа буде розташовуватися ліворуч від блоку.

Браузери підтримують різні логічні властивості меж, тому перед використанням обов'язково перевірте їхню підтримку.

Радіус кордону¶

Щоб додати блоку закруглені кути, скористайтеся властивостями border-radius .

Це скорочення додає послідовну межу до кожного кута блоку. Як і у випадку з іншими властивостями кордону, радіус кордону для кожної сторони можна встановити за допомогою border-top-left-radius , border-top-right-radius , border-bottom-right-radius і border-bottom-left-radius .

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

Визначаючи одне значення для кута, ви використовуєте ще одне скорочення, оскільки радіус кордону поділяється на дві частини: вертикальну та горизонтальну. Це означає, що задаючи border-top-left-radius: 1em , ви задаєте радіус top-left-top та радіус top-left-left.

Ви можете задати обидві властивості для кожного кута таким чином:

Це додає значення border-top-left-top , що дорівнює 1em і значення border-top-left-left , що дорівнює 2em . Це перетворює радіус верхньої лівої межі на еліптичний радіус, а не в круговий за умовчанням.

Ви можете вказати ці значення у скороченні border-radius , використовуючи / для визначення еліптичних значень після стандартних. Це дозволяє творчо підійти до створення складних постатей.

Кордони зображень¶

У CSS можна використовувати не тільки межі, що базуються на обведенні. Можна також використовувати будь-який тип зображення за допомогою border-image . Ця скорочена властивість дозволяє встановити вихідне зображення, спосіб його нарізки, ширину зображення, відступ кордону від краю і її повторення.

Властивість border-image-width аналогічна властивості border-width : з його допомогою визначається ширина зображення кордону. Властивість border-image-outset дозволяє встановити відстань між зображенням кордону і блоком, навколо якого вона обернута.

border-image-source ¶

Властивість border-image-source (джерело зображення кордону) може бути URL для будь-якого коректного зображення, включаючи CSS-градієнти.

border-image-slice ¶

Властивість border-image-slice - це корисна властивість, що дозволяє розрізати зображення на 9 частин, що складаються з 4 розділених ліній. Воно працює подібно до скорочення margin , де задаються значення верхнього, правого, нижнього і лівого. зміщення.

Після визначення значень усунення у вас тепер є 9 ділянок зображення: 4 кути, 4 краї та середня секція. Кути застосовуються до кутів елемента із зображенням кордону. Краї застосовуються до країв цього елемента. Властивість border-image-repeat визначає, як ці краї заповнюють свій простір, а властивість border-image-width керує розміром фрагментів.

Нарешті, ключове слово fill визначає, чи буде середня частина, що залишилася після нарізки, використовуватися як фонове зображення елемента чи ні.

border-image-repeat ¶

border-image-repeat — це спосіб вказати CSS, як ви хочете, щоб зображення кордону повторювалося. Він працює так само, як і background-repeat.

• Початкове значення – stretch , яке розтягує вихідне зображення, щоб заповнити вільний простір, де це можливо.
• Значення repeat повторює краї вихідного зображення стільки разів, скільки це можливо, і може обрізати краї для досягнення цієї мети.
• Значення round аналогічне значення repeat, але замість того, щоб обрізати області країв зображення, щоб їх було якомога більше, воно розтягує зображення, а також повторює його, щоб домогтися безшовного повторення.
• Значення space знову ж таки аналогічне значення repeat, але при цьому додається простір між кожною крайовою областю для створення безшовного візерунка.

CSS: Рамки

Для створення кордону елемент має властивість border , яка є скороченням від декількох властивостей:

• border-width – ширина кордону
• border-style – стиль кордону
• border-color - колір кордону

Можна вказувати кілька властивостей, а можна об'єднати все в рамках властивості border . Такий варіант зустрічається найчастіше і виглядає так:

• 1px - ширина кордону
• solid - стиль кордону
• #ccc - колір кордону

Зі значеннями в пікселях та hex-кольором ми вже стикалися в рамках курсу, а ось стилів кордонів у CSS вісім:

і є значення none, яке «видалити» кордон, оскільки при значенні border-style: none браузери ігнорують інші властивості та видаляють кордон

Приклади кордонів

Завдання

Додайте до редактора з класом border-bold та встановіть суцільний кордон завтовшки 5 пікселів. Колір рамки #2196F3. Стилі запишіть у тезі

Якщо ви зайшли в глухий кут, то саме час поставити питання в «Обговореннях». Як правильно поставити запитання:

• Обов'язково докладіть виведення тестів, без нього практично неможливо зрозуміти, що не так, навіть якщо ви покажете свій код. Програмісти погано виконують код у голові, але за помилкою майже завжди зрозуміло, куди дивитися.

Тести влаштовані таким чином, що вони перевіряють рішення різними способами та на різних даних. Часто рішення працює з одними вхідними даними, але з іншими.Щоб розібратися з цим моментом, вивчіть вкладку «Тести» та уважно подивіться на виведення помилок, у якому є підказки.

Це нормально 🙆, у програмуванні одне завдання можна виконати безліччю способів. Якщо ваш код пройшов перевірку, він відповідає умовам завдання.

У поодиноких випадках буває, що рішення підігнано під тести, але це видно відразу.

Створювати навчальні матеріали, зрозумілі всім без винятку, досить складно. Ми дуже намагаємося, але завжди є що покращувати. Якщо ви зустріли матеріал, який вам незрозумілий, напишіть проблему в «Обговореннях». Ідеально, якщо ви сформулюєте незрозумілі моменти як запитань. Зазвичай, нам потрібно кілька днів для внесення правок.

До речі, ви також можете брати участь у покращенні курсів: унизу є посилання на вихідний код уроків, який можна правити прямо з браузера.

Корисне