Шито білими нитками

Влад Мержевич

У CSS для створення різних рамок або ліній вздовж сторін елемента використовується властивість border. Вона досить універсальна, має різні стилі ліній, яким просто задати потрібну товщину та колір. Через формат rgba можна встановити й напівпрозорі лінії. Однак таким лініям безпосередньо не можна задати бажану відстань від краю елемента, щоб отримати дизайнерські ефекти, подібні до показаного на малюнку 1.

Далі я покажу кілька методів, як отримати пунктирні лінії на довільній відстані від краю елемента.

Використання вкладених елементів

Це найпростіший метод додавання ліній. Для батьківського елемента вказуємо властивість padding на потрібній стороні зі значенням, рівним відстані від краю до границі. А для дочірнього елемента вже задаємо параметри лінії (приклад 1).

Застосування :after

Розвитком попереднього методу буде позбавлення від зайвого вкладеного елемента і покладання його функцій на псевдоелемент :after. Для того щоб наш фіктивний елемент займав увесь доступний розмір своєї батьківської ширини та висоти, слід додати властивість position з різними значеннями: relative у батька та absolute у :after. Після цього використовувати властивості left, right, top, bottom з потрібними значеннями (приклад 2).

Властивість outline-offset

Окрім властивості border рамку навколо елемента можна задати також за допомогою outline. На відміну від border вона не розділяється на сторони, тому неможливо задіяти щось подібне до outline-left. Проте можна варіювати відстань між краєм елемента та границею через властивість outline-offset. Від'ємне значення виводить лінію всередину елемента, а не ззовні (приклад 3).

Тінь навколо елемента

Я розгляну ще один метод додавання рамки всередині елемента, незважаючи на те, що він менш універсальний порівняно з вищезгаданими техніками і має ряд недоліків. Ідея полягає в тому, що ми додаємо до елемента різку тінь, ширина якої співпадає з відстанню від лінії до краю. Насправді ми не рамку виводимо всередину елемента, а розширюємо сам елемент навколо рамки. Які ж недоліки у цього методу?

  • Фон повинен бути лише однотонним, фонові малюнки та градієнти вже не підійдуть.
  • Неможливо задати параметри тіні на окремих сторонах, і, як наслідок, не вдасться зробити лінії як на малюнку 1.
  • Тінь розширює сам елемент, що впливає на положення інших елементів і змусить внести зміни до стилів для збереження вигляду макета.
  • Метод не працює в браузері IE до версії 8.0 включно.
рамки і границі

Часті запитання