Principio de implementación:
Este efecto es en realidad la variante que implementé en el Capítulo 2. Hablemos de los códigos clave principales.
El cambio principal es la posición de la imagen de fondo, pero esta vez es un poco diferente a la del Capítulo 2. Esta vez debes tener en cuenta los cambios en las dos esquinas redondeadas a continuación.
Primero veamos la implementación de las dos esquinas redondeadas anteriores:
/*Posicionamiento de desplazamiento de imagen: la parte superior*/
.sharp b.b2{posición-fondo:-4px arriba;}
.sharp b.b3{posición-fondo:-2px -1px;}
.sharp b.b4{posición-fondo:-1px -2px;}
Echemos un vistazo a la configuración de estilo de las esquinas redondeadas de los dos emoticonos QQ a continuación. La parte inferior y la parte superior se corresponden entre sí.
/*Posicionamiento de desplazamiento de imagen--parte inferior*/
.sharp b.b7{posición-fondo:-4px abajo;}
.sharp b.b6{posición-fondo:-2px abajo;}
.sharp b.b5{posición-fondo:-1px abajo;}
Diferentes estilos de llamadas de imágenes:
/*Esquema de color uno, estilo verde----------------------------------------*/
/*color del borde*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1, .color1 .b8{fondo:#262626;}
/*Ruta de la imagen*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{fondo:url(imagen/1.jpg) no -repetir;}
Las dos primeras oraciones juntas forman el valor de color del cuadro de borde, que debe establecerse en el mismo valor de color. La siguiente oración establece la ruta de llamada de la imagen.
Sólo tres frases para conseguir una combinación de colores.