Параметри рамки рамки. Створення рамок у CSS. Властивість border. Синтаксис CSS border-width

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

Ефект об'ємності таблиці досягається за рахунок одночасного використання світлих та темних кольорів у рамці або осередках, при цьому виникає ілюзія, що таблиця виступає над тлом веб-сторінки. Наприклад, рамка навколо таблиці за промовчанням відображається як об'ємна. Хоча такий вид рамки не має достатньої популярності у веб-дизайнерів, це не означає, що такі рамки взагалі не слід застосовувати. Використовуючи стилі, таблиці можна надати найрізноманітніший вид, зокрема і об'ємний, який може успішно виділятися і натомість своїх «плоських» побратимів.

Товщина тривимірної рамки регулюється атрибутом.

Для створення вказаної таблиці винесемо все можливі параметрив стилі, а додавання рамки покладемо атрибут border (приклад 1).

Приклад 1. Використання атрибуту border

В даному прикладі рамка навколо таблиці має товщину два пікселі, а її вигляд може незначно відрізнятися в різних браузерах.

Стилі також дозволяють створити ефект тривимірності таблиці за рахунок використання універсальної стильової властивості border. Як значення вказується стиль лінії та її товщина, які дуже впливають на кінцевий вигляд таблиці. У табл. 1 показані деякі значення та кінцевий результат.

У прикладі 2 для додавання рамки використовується стиль зі значенням groove та товщиною 5 пікселів. Вид отриманої таблиці показано на рис. 2.

Стильова властивість border застосовується до селектора TABLE для створення рамки навколо таблиці та селекторів TD і TH для додавання рамки до кожної комірки. При цьому, щоб не виникало подвійних ліній у місцях зіткнення різних осередків, використовується властивість border-collapse зі значенням collapse (приклад 2).

Приклад 2. Створення рамки за допомогою стилів

У цьому прикладі створюється поглиблена рамка сірого кольору навколо осередків та таблиці загалом.

Ми можемо створити ефект тривимірності таблиці з допомогою правильного чергування темних і світлих ліній у її рядках (рис. 3).

На цьому малюнку показано, що парні рядки таблиці містять світле тло, білу горизонтальну лінію знизу і темно-сіру — зверху. Втім, можна трактувати і навпаки, і сказати, що це непарні рядки мають білу лінію зверху і темну знизу.

Для створення наведеної на рис. 3 таблиці введемо додатковий клас з ім'ям even і додаватимемо його до парних рядків таблиці. При цьому для селектора TR не можна безпосередньо встановити властивість border, лінія в цьому випадку не відображатиметься. Тому скористаємося контекстними селекторами і додамо конструкцію .even TD, яка каже, що для всіх осередків розташованих усередині елемента з класом even задаємо лінію знизу та зверху. Колір фону за допомогою властивості background допускається застосовувати до селектора TR, що показано в прикладі 3.

Приклад 3. Виділення рядків таблиці

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

Використовується для відображення боку звернено рамки навколо елемента. Товщина рамки визначається властивістю border , при цьому якщо вказано border: 0 , то рамка не виводиться. За інших значень border малюнок завжди має пріоритет. Фон, якщо він заданий за властивості background , відображається під рамкою.

Синтаксис

Border-image: none | [<адрес> [<число> | <проценты>]{1,4} ? ] && {0,2}

Позначення

Значення

none Не відображається мальована рамка, використовується встановлений стиль кордону.<адрес>Шлях до графічного файлу. Обов'язковий параметр.

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

Мал. 1. Зображення для створення рамки

<число>

Одне, два, три або чотири значення, які вказують розміри частин зображення в пікселях, задаючи тим самим області розподілу. Самі одиниці не пишуться, тільки число (10, а не 10px). На рис. 2 червоними лініями виділені необхідні створення рамки області.

Мал. 2. Розподіл вихідного зображення в області

Дозволяється використовувати одне, два, три чи чотири значення, розділяючи їх між собою пробілом. Ефект залежить від кількості значень та наведено в табл. 1.

Вплив цих параметрів на вигляд рамки показано на рис. 3.

		round

Мал. 3. Результат використання параметрів stretch, repeat та round

приклад

Результат прикладу показано на рис. 4.

Мал. 4. Вид рамки

Об'єктна модель

Об'єкт.style.borderImage

Примітка

Firefox до версії 15.0 підтримує властивість -moz-border-image.

Safari до версії 6.0, Chrome до версії 15.0, Android до версії 4.4 підтримують властивість -webkit-border-image.

Opera до версії 15.0 підтримує властивість -o-border-image.

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

• Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
• Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
• Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
• Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
• Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
• Draft ( Чернетка специфікації) – перша чорнова версія стандарту.

Border-image - властивість, що дозволяє задавати фонове зображеннядля кадру елемент. Властивість заповнює рамку заданою картинкою, розподіляючи частини зображення таким чином, щоб кутові частини знаходилися в кутах рамки, а простору між ними заповнювалися рештою частин зображення.

Ця властивість дозволяє легко робити неймовірні штуки, для яких раніше потрібно від 3-х до 8-ми картинок та маніпуляції з розміткою.

Upd:У Firefox працюють починаючи з 29-ї версії.

Розмір картинки дорівнює товщині рамки. Колір та стиль рамки ігноруються.

Якщо задати тільки border-image-source, картинка заповнить собою куточки, не знаючи що їй робити далі:

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

Важлива властивість, яка визначає розмір шматка зображення, що заповнить кути рамки. Інші частини будуть використані для заповнення простору між кутами за алгоритмом, заданим у border-image-repeat .

Можливі значення:

<проценты>- розраховуються щодо розміру зображення. Горизонтальні щодо ширини, вертикальні – щодо висоти.<числа>- пікселі (для растрового зображення) або координати (для векторного). Одиниці виміру не вказуються. fill - ключове слово, що доповнює попередні значення. Якщо воно задано, зображення не обрізається внутрішнім краєм рамки, а заповнює область всередині рамки. Дуже корисно для округлих рамок.

Щоб визначити значення для кожної сторони, можна встановити кілька значень через пробіл.

Сума значень протилежних сторін повинна бути меншою за розмір картинки, інакше не буде чим заповнювати простір між кутами.

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Border-image-repeat

Властивість визначає, як будуть заповнюватися проміжки між кутами.

Можливі значення: stretch - розтягує заповнює ділянку картинки. Значення за замовчуванням; repeat - повторює заповнює ділянку, при цьому видно місця стиків з кутовим малюнком; round – заповнює проміжок між кутами. Може бути помітний стик у середині сторони. Найакуратніша дія. space - діє схоже на repeat. Різниці не виявила.

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

Border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;

Зліва repeat, праворуч round.

Якщо рамка складна і сторони погано стикуються між собою, stretch спрацює коректніше, ось приклад .

Border-image-width

border-image-width

Властивість керує шириною видимої частини рамки, масштабує її. Якщо це значення більше за ширину border-width , картинка рамки заповзе під вміст, навіть якщо не задана властивість fill .

Можливі значення:<длина>- значення px або em;<%>- значення у відсотках щодо розміру зображення;<числа>- числове значення, яке множиться border-width auto - ключове слово. Якщо воно задано, значення дорівнює відповідному border-image-slice . Якщо потрібного розміру немає, використовується значення border-width, при цьому картинка заповнює весь кут рамки, заповзаючи під контент. Трохи дивно працює.

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;

Праворуч кадр з border-image-width . На прикладі зліва видно, як картинка обрізалася внутрішніми краями рамки. Права рамка за рахунок збільшення ширини заповзла під контент.

Border-image-outset

Цікава властивість, що дозволяє відсунути рамку за межі елемента. Від'ємні значенняне підтримуються.

Можливі значення:<длина>- значення px або em;<числа>- числове значення, яке множиться border-width .

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

Справа приклад з border-image-outset . Ця властивість не впливає на розмір елемента, а рамка може перекривати сусідні елементи.

Рамки - це такі лінії, які оточують елемент (що міститься в ньому контент і відступи навколо нього). Приклад, з яким ми вже стикалися - рамки осередків усередині таблиці.

CSS передбачає два типи рамок: внутрішні межі та зовнішні лінії. Властивості CSS, що відповідають за оформлення рамок, починаються зі слова Border, яке якраз і можна перекласти як Рамка, Кордон. Наявність і формат зовнішнього контуру задаються властивостями, що починаються словом outline. Outline, на відміну від border, не впливає на ширину і положення блоку, що обрамляється. Крім того, його не можна встановити лише з одного боку, як border- Тільки з усіх боків відразу.

Спочатку поговоримо про оформлення border, потім перейдемо до outline.

border-width

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

Задавати ширину можна як за допомогою звичних пікселів, відсотків та інших одиниць довжини CSS, так і зарезервованими словами thin(2px), medium(4px) та thick(6px).

Border-width: 16px 12px 4px 8px;

border-style

Визначає стиль рамки. Зверніть увагу: якщо не задати це правило, але вказати властивість border-width, то рамок взагалі не буде, тому якщо хочете видимі кордони, обов'язково вкажіть border-style.

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

Останній абзац показує, що стиль, як і товщина, біля рамки з кожного боку може бути власним:

border-style: solid double dotted none

border-color

Працює так само, як і попередні властивості, але відповідає за колір кордону. Йому теж можна задавати від одного до чотирьох значень, і ви вже знаєте результат. Якщо правило не встановлено, рамки матимуть колір тексту поточного елемента або, якщо не вказано і він, колір тексту батька-батька.

Border-color: #C85EFA;

border

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

P ( border: 2px solid green; )

Для налаштування різних правил рамкам з різних боків можна використовувати такі значення:

• border-top- верхня межа.
• border-right- Права.
• border-bottom- нижня.
• border-left- Ліва.

P ( border-left: 6px dotted yellow; )

outline-width

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

outline-style

Значення властивості дублюють значення border-style. Правило задає стиль зовнішнього контуру.

Опис

Встановлює стиль кордону навколо елемента. Допустимо задавати індивідуальні стилі для різних сторін елемента.

Синтаксис

border-style: (1,4) | inherit

Значення

Для керування видом кордону надається кілька значень якості border-style. Вигляд залежить від використовуваного браузера та заданої товщини кордону. У табл. 1 наведено назви стилів і одержувана рамка при різних значенняхтовщини - 1, 3, 5 та 7 пікселів.

Крім перелічених у таблиці значень використовуються такі ключові слова.

None Не відображає межу і її товщина (border-width) задається нульовою. hidden Має той самий ефект, як і none крім застосування border-style до осередків таблиці, у якій значення властивості border-collapse встановлено як collapse . У цьому випадку навколо осередку кордон не відображатиметься взагалі. inherit Наслідує значення батька.

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат цього прикладу показано на рис. 1.

Мал. 1. Застосування якості border-style

Об'єктна модель

document.getElementById("elementID ").style.borderStyle

Браузери

Браузер Internet Explorerдо шостої версії включно у товщині кордону 1px відображає dotted як dashed . При товщині 2px та вище значення dotted працює коректно. Ця помилка виправлена ​​в IE7, але тільки для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то IE7 значення dotted перетворюється на dashed .

Internet Explorer до версії 7.0 включно не підтримує значення hidden і inherit.

Стиль кордону в різних браузерах може дещо відрізнятися при використанні значень groove, ridge, inset або outset.