рамки

Несколько псевдоэлементов

Следует помнить, что к каждому элементу можно добавить только один ::before и только один ::after. В большинстве ситуаций двух псевдоэлементов вполне достаточно, хотя в сложных случаях их потребуется больше. При этом можно воспользоваться таким трюком — внутрь нашего элемента вставить пустой <div> и к нему уже добавить ещё псевдоэлементы.

Модифицируем повёрнутую рамку, добавив к ней ещё и уголки (рис. 1).

Повёрнутые рамки

Рамки можно делать с помощью свойств border, outline, даже с помощью box-shadow и градиентов. Все эти свойства позволяют получить самые разнообразные декоративные рамки. Однако если рамка должна быть повёрнута (рис. 1), то без псевдоэлементов не обойтись, поскольку нам надо трансформировать только рамку, не затрагивая содержимого элемента.

Декоративная рамка

Рис. 1. Декоративная рамка