Principe de mise en œuvre :
Cet effet est en fait la variante que j'ai implémentée au chapitre 2. Parlons des principaux codes clés.
Le principal changement est le positionnement de l'image d'arrière-plan, mais cette fois il est un peu différent de celui du chapitre 2. Cette fois, vous devez prendre en compte les changements dans les deux coins arrondis ci-dessous.
Regardons d’abord la mise en œuvre des deux coins arrondis ci-dessus :
/*Positionnement décalé de l'image -- la partie supérieure*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{position-arrière-plan :-2px -1px;}
.sharp b.b4{position-arrière-plan :-1px -2px;}
Jetons un coup d'œil aux paramètres de style des coins arrondis des deux émoticônes QQ ci-dessous. La partie inférieure et la partie supérieure se correspondent.
/*Positionnement décalé de l'image - partie inférieure*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}
Différents styles d'appel d'images :
/*Schéma de couleurs 1, style vert----------------------------------------*/
/*Couleur de la bordure*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{fond :#262626;}
/*Chemin de l'image*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) non -répéter;}
Les deux premières phrases forment ensemble la valeur de couleur de la zone de bordure, qui doit être définie sur la même valeur de couleur. La phrase suivante définit le chemin d'appel de l'image.
Juste trois phrases pour obtenir une palette de couleurs.