Използване на псевдо елемент (и)
Можете да позиционирате псевдоелемент така, че да е или зад елемента, и по-голям, като прави ефект на границата със собствен фон или по-малък и вътре (но се уверете, че съдържанието се позиционира отгоре).
Елементът, който се нуждае от множество граници, трябва да има своя собствена граница и относително позициониране.
.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; )Вижте писалката gbgRqZ от Chris Coyier (@chriscoyier) в CodePen.
Можете да направите трета граница, като използвате и :afterпсевдо класа. Обърнете специално внимание, че Firefox 3 (преди 3.6) прецаква това, като поддържа :afterи :before, но не позволява да бъдат абсолютно позиционирани (така че изглежда странно).
Използване на контур
Въпреки че е малко по-ограничен от границата (обикаля целия елемент, без значение какво), контурът е допълнителна свободна граница.
.borders ( border: 5px solid blue; outline: 5px solid red; )Използване на кутия-сянка
Можете да използвате 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.