Принцип реализации:
Этот эффект на самом деле является вариантом, который я реализовал в главе 2. Давайте поговорим об основных кодах клавиш.
Основное изменение — это расположение фонового изображения, но на этот раз оно немного отличается от того, что было в главе 2. На этот раз вам нужно принять во внимание изменения в двух закругленных углах ниже.
Давайте сначала посмотрим на реализацию двух закругленных углов выше:
/*Расположение изображения со смещением — верхняя часть*/
.sharp b.b2{background-position:-4px сверху;}
.sharp b.b3{background-position:-2px -1px;}
.sharp b.b4{background-position:-1px -2px;}
Давайте посмотрим на настройки стиля закругленных углов двух смайлов QQ ниже. Нижняя и верхняя части соответствуют друг другу.
/*Позиционирование смещения изображения — нижняя часть*/
.sharp b.b7{background-position:-4px внизу;}
.sharp b.b6{background-position:-2px внизу;}
.sharp b.b5{background-position:-1px внизу;}
Различные стили вызова изображений:
/*Цветовая схема первая, зеленая ----------------------------------------*/
/*Цвет границы*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{фон:#262626;}
/*Путь к изображению*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) нет -повторить;}
Первые два предложения вместе образуют значение цвета рамки, для которого необходимо установить одно и то же значение цвета. Следующее предложение устанавливает путь вызова изображения.
Всего три предложения, чтобы получить цветовую схему.