До створення різних красивостей навколо нього і першою такою красивістю буде рамка.

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

solid – суцільна рамка;

dashed – пунктирна рамка;

dotted – точкова рамка;

double – рамка подвійної лінії;

groove – рамка із тінню;

ridge – з рельєфом;

Ще дві властивості необхідні для створення простих рамок – це

widht – товщина рамки;

color – колір рамки;

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

p (
border: 2px solid #ffff00;
}

padding - внутрішній (відступ рамки від змісту);

margin - Зовнішній (відступ рамки від зовнішніх об'єктів);

Ще для відступів задаються напрямки (з якого боку скільки відступити). Ці властивості застосовуються, коли виникає необхідність розмістити вміст не по центру рамки, або саму рамку з будь-яким зміщенням.

top – відступ зверху;

righnt - відступ справа;

bottom - відступ знизу;

left – відступ ліворуч

Записуються значення цих властивостей у скороченому варіанті один за одним (padding: 10px 30px 15px 20px ), і першим ставиться значення top , а далі за годинниковою стрілкою інші.

Якщо поставити тільки одне значення, це означатиме, що відступ з усіх боків буде однаковий.

p (
border: 2px solid #ffff00;

margin: 20px;
}

Якщо потрібно розмістити текст, або зображення по центру рамки, то до селектора «p» можна додати властивість text-align: center ;

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

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

p (
border: 2px solid #ffff00;
padding : 10px 20px 10px 20px;
margin: 20px;
width: 400px;
}

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

І останнє, що потрібно зробити - це розмістити рамку на сторінці. Робиться це за допомогою вже наявного властивості margin.

А якщо потрібно просто розташувати блок рамки по центру сторінки, то як margin додається значення auto.

p (
border: 2px solid #ffff00;
padding : 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Для першого прикладу створимо html документ і створимо рамки solid для блоку body (тіло документа), і одному абзацу.

У наступних прикладах буде змінюватися лише CSS (те, що укладено в тег style).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

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

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

У цьому прикладі навколо елемента додається чорна рамка, яка відокремлена від фону білою облямівкою (мал. 1).

Рис. 1. Рамка навколо елемента

Рамка під час використання:hover

При додаванні рамки через border відбувається збільшення ширини елемента, що досить помітно при поєднанні border та псевдокласу: hover. Є два способи, як це перемогти. Найпростіше - замінити border на outline, яке, як ми знаємо, не впливає на розміри елемента (приклад 2).

Приклад 2. Рамка під час наведення

outline не завжди годиться, хоча б тому, що на нього заокруглення куточків не діє. Тут підійде другий метод - додаємо невидиму рамку або рамку, що збігається з кольором фону, а потім змінюємо параметри при наведенні (приклад 3). Тоді ніякого зміщення елемента не відбуватиметься, оскільки рамка спочатку вже є. Але завжди пам'ятаємо, що ширина елемента у своїй складається з значень width , border ліворуч і border справа. Аналогічно і з висотою.

Приклад 3. Рамка під час наведення

Рамка навколо полів форми

У деяких браузерах (Chrome, Safari, останні версії Opera) навколо полів форми при отриманні фокусу відображається невелика кольорова рамка (мал. 2). Щоб її прибрати, достатньо додати до властивості outline значення none , як показано в прикладі 4.

Рис. 2. Рамка навколо полів

Приклад 4. Забираємо рамку

Рамки через box-shadow

Хоча властивість box-shadow призначена для додавання тіні навколо елемента, за його допомогою можна створювати рамки, причому такі, які неможливо зробити через border або outline. Все завдяки тому, що число тіней може бути необмеженим, параметри яких перераховуються через кому.

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

У прикладі 4 показано додавання двох рамок та однієї межі праворуч за допомогою однієї властивості box-shadow.

Приклад 4. Використання box-shadow

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

Рис. 3. Рамки, створені властивістю box-shadow

Одним із цікавих додатків якості CSS3 box-shadow є створення подвійної рамки навколо елемента. Дуже цікавий ефект для оформлення сторінок, але він буде працювати тільки в нових версіях браузерів, які підтримують box-shadow .

Однак існує ще кілька методів створення такого ефекту. Причому очевидне використання фонового зображення є дуже далеким від ідеалу.

У цьому уроці представлено п'ять методів створення подвійний рамки навколо елемента. Причому лише один із них вимагає зображення, а решта використовують чистий код CSS з відмінною підтримкою в браузерах.

Метод 1: border та outline

Даний метод працює тільки в тих браузерах, які підтримують властивість outline (усі крім IE6/7). Ви додаєте елементу обидві властивості border та outline.

One ( border: solid 6px #fff; outline: solid 6px #888; )

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

Метод 2: псевдо елемент

Цей метод вимагає абсолютного позиціонування рамки:

Two ( border: solid 6px #fff; position: relative; z-index: 1; ) .two:before ( content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px #888; width: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10;

Ключовими моментами є встановлення властивості z-index (щоб псевдо елемент перекривав зміст), позиціонування та значення min-height. Остання властивість зберігає еластичність рамки.

Метод 3: тінь

Найкращий спосіб, оскільки потрібен лише один рядок коду з установками якості box-shadow .

Three (box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; )

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

Як і властивість outline box-shadow не впливає на сусідні елементи і може перекривати їх. Тому треба встановити поле формування зовнішнього вигляду композиції.

Звичайно, підтримка якості box-shadow обмежена новими браузерами.

Метод 4: Додатковий елемент div

У цьому методі використовується зовнішній елемент