Несколько границ онлайн урок.


# Использование псевдоэлементов

Вы можете позиционировать псевдоэлемент таким образом, чтобы он либо находился за элементом, либо больше, создавая эффект границы с собственным фоном или меньше и внутри (но убедитесь, что контент находится на Вверх).

Элемент, имеющий несколько границ, должен иметь собственную границу и относительное позиционирование.

.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;
}

Вы можете сделать третью границу, используя также: послепсевдо-класс. Особо следует отметить, что Firefox 3 (до 3.6) закручивает это, поддерживая: послеи: до, но не позволяя им полностью позиционировать (так что это выглядит странно).

# Использование контура

Хотя это немного более ограничено, чем граница (обходит весь элемент независимо от того), контур является дополнительной свободной границей.

.borders {
border: 5px solid blue;
outline: 5px solid red;
}

# Использование теневой тени

Вы можете использовать тень для создания эффекта границы, сделав смещение тени и получив 0 размытие. Кроме того, с помощью разделяющих запятую значений вы можете иметь столько «границ», сколько хотите:

.blur {
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
}

# Использование обрезанного фона

Вы можете сделать фон элемента остановленным перед заполнением. Таким образом, элементы обычной границы могут выглядеть как двойная граница.

.borders {
border: solid 1px #f06d06;
padding: 5px;
background-clip: content-box; /* support: IE9+ */
background-color: #ccc;
}

На входе: