Princípio de implementação:
Este efeito é na verdade a variante que implementei no Capítulo 2. Vamos falar sobre os principais códigos-chave.
A principal mudança é o posicionamento da imagem de fundo, mas desta vez é um pouco diferente daquela do Capítulo 2. Desta vez é preciso levar em consideração as mudanças nos dois cantos arredondados abaixo.
Vejamos primeiro a implementação dos dois cantos arredondados acima:
/*Posicionamento do deslocamento da imagem--a parte superior*/
.sharp b.b2{posição de fundo: -4px topo;}
.sharp b.b3{posição de fundo:-2px -1px;}
.sharp b.b4{posição de fundo:-1px -2px;}
Vamos dar uma olhada nas configurações de estilo dos cantos arredondados dos dois emoticons QQ abaixo. A parte inferior e a parte superior correspondem entre si.
/*Posicionamento do deslocamento da imagem--parte inferior*/
.sharp b.b7{posição de fundo: -4px inferior;}
.sharp b.b6{posição de fundo: -2px inferior;}
.sharp b.b5{posição de fundo: -1px inferior;}
Diferentes estilos de chamada de imagem:
/*Esquema de cores um, estilo verde----------------------------------------*/
/*Cor da borda*/
.color1 .b2, .color1 .b3, .color1 .b4, .color1 .b5, .color1 .b6,
.color1 .b7,.color1 .content{cor da borda:#262626;}
.color1 .b1,.color1 .b8{fundo:#262626;}
/*Caminho da imagem*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) não -repita;}
As duas primeiras frases juntas formam o valor da cor da caixa de borda, que precisa ser definida com o mesmo valor de cor. A frase a seguir define o caminho de chamada da imagem.
Apenas três frases para obter um esquema de cores.