Использование псевдоэлемента (ов)
Вы можете расположить псевдоэлемент так, чтобы он был либо позади элемента, либо больше, создавая эффект границы с собственным фоном, либо меньше и внутри (но убедитесь, что содержимое расположено сверху).
Элемент, требующий нескольких границ, должен иметь собственную границу и относительное расположение.
.borders ( position: relative; border: 5px solid #f00; )Вторичная граница добавляется псевдоэлементом. Он задается с абсолютным позиционированием и вставкой со значениями сверху / слева / снизу / справа. Он также будет иметь границу и будет сохраняться под содержимым (с сохранением, например, возможности выбора текста и кликабельности ссылок) путем присвоения ему отрицательного значения z-index. Будьте осторожны с отрицательным 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 Криса Койера (@chriscoyier) на CodePen.
Использование обрезанного фона
Вы можете остановить фон элемента перед заполнением. Таким образом, нормальная граница элемента может выглядеть как двойная граница.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )На входе:
Посмотрите эффект границы Pen Double, созданный Крисом Койером (@chriscoyier) на CodePen.