Використання псевдоелементів
Ви можете розташувати псевдоелемент таким чином, щоб він знаходився або позаду елемента, і більшим, роблячи ефект кордону з власним фоном, або меншим і всередині (але переконайтеся, що вміст розміщується зверху).
Елемент, що потребує декількох кордонів, повинен мати власний кордон і відносне розташування.
.borders ( position: relative; border: 5px solid #f00; )Вторинна межа додається псевдоелементом. Він встановлюється з абсолютним позиціонуванням та вставкою зі значеннями верхнього / лівого / нижнього / правого. Це також матиме межу і зберігатиметься під вмістом (зберігаючи, наприклад, можливість вибору тексту та клікабельність посилань), надаючи йому від'ємне значення z-індексу. Обережно з негативним z-індексом, якщо це всередині ще одного елемента із власним кольором тла, це може не спрацювати.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Дивіться Pen gbgRqZ Кріса Койєра (@chriscoyier) на CodePen.
Ви можете зробити третю межу, використовуючи також :afterпсевдо-клас. Зверніть особливу увагу на те, що Firefox 3 (попередня версія 3.6) викручує це, підтримуючи :afterта :before, але не дозволяючи їм абсолютно розташовуватись (так це виглядає дивним).
Використовуючи контур
Незважаючи на те, що він дещо обмеженіший за межу (обходить цілий елемент незалежно від того, що), контур - це додатковий вільний кордон.
.borders ( border: 5px solid blue; outline: 5px solid red; )Використання box-shadow
Ви можете використовувати box-shadow, щоб зробити ефект кордону, зробивши тінь зміщеною і отримавши 0 розмиття. Крім того, за допомогою значень, розділених комами, ви можете мати скільки завгодно “меж”:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Дивіться Pen xbgreX від Chris Coyier (@chriscoyier) на CodePen.
Використання обрізаного фону
Ви можете зробити фон елемента зупиненим перед заповненням. Таким чином, нормальна межа елементів може виглядати як подвійна межа певним чином.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )На вході:
Дивіться ефект подвійного кордону Pen на Chris Coyier (@chriscoyier) на CodePen.