Используйте css2.1 для достижения нескольких эффектов фона и нескольких границ.
Используйте CSS2.1, чтобы добиться эффекта трех фоновых изображений и двух изображений контента в одном элементе HTML или эффекта нескольких границ. Этот метод прогрессивного улучшения применяется ко всем браузерам, поддерживающим псевдоэлементы CSS2.1 и их атрибуты позиционирования. Поддержка CSS3 не требуется.
Демо: несколько фонов с использованием CSS2.1
Демо: Polyborder с использованием CSS2.1
Поддерживаемые браузеры: Firefox 3.5+, Safari 4+, chrome4+, Opera10+, IE8+.
Как это достигается?
По сути, создаваемые нами псевдообъекты (:before и :after) аналогичны тому, как мы обрабатываем вложенные элементы HTML. Но у них есть уникальное преимущество перед вложенными элементами HTML — они не являются семантическими.
При использовании нескольких фонов или нескольких границ нам необходимо зафиксировать содержимое слоя псевдоэлемента за содержимым элемента HTML, используя абсолютное позиционирование.
Нереальный контент содержится в псевдоэлементах для позиционирования. Это означает, что они могут свободно расширяться в пределах «родительского» элемента, не затрагивая его содержимое. Это может произвольно комбинировать значения сверху, справа, снизу, слева, ширины и высоты абсолютного позиционирования. Главное, что их комбинация является гибкой.
Каких эффектов можно достичь?
Вам нужно полагаться только на один элемент HTML и связанные с ним изображения для создания таких вещей, как несколько цветов фона, несколько фоновых изображений, обрезка фонового изображения, переворачивание изображений, расширяемые модели блоков с использованием границ изображений и плавающие поддельные столбцы (примечание Сяочжи: трехколоночный эффект одинаковой высоты (о котором будет сказано позже), изображения вне блочной модели, отображение нескольких рамок снаружи и другие популярные эффекты. Может потребоваться 2 дополнительных изображения контента в сгенерированном контенте.
Несколько фонов с использованием CSS2.1 и несколько границ с использованием демонстрационных страниц CSS2.1 покажут, как использовать технологию псевдообъектов CSS2.1 для достижения этих популярных эффектов.
Большинство структур содержат дочерние элементы. Поэтому зачастую вы сможете отображать больше эффектов с помощью псевдоэлементов, которые являются первым дочерним элементом родительского элемента (установленным как последний дочерний элемент). Кроме того, вы также можете использовать :hover для создания сложных интерактивных эффектов стиля.