Comment obtenir l'effet de boîte tridimensionnelle du logo à l'aide des styles CSS

Auteur：Eve Cole Date de mise à jour：2009-06-12 19:47:12

Voyons comment obtenir l'effet de boîte 3D, puis nous vous montrerons quelques excellents exemples.

Préparation Préparez d’abord votre page et votre image, nous utilisons cette image :

Nous écrivons simplement du HTML comme ceci :

Le style CSS pourrait ressembler à ceci :

body{background:#999;}

#récipient{
largeur : 960 px ;
arrière-plan :#fff ;
marge : 20 px automatique ;
remplissage : 10 px ;
}

Ce qui suit est un aperçu de l'effet :

Définir sur le positionnement relatif Lorsque nous positionnons le logo, nous voulons que sa position soit relative au conteneur, utilisez donc le positionnement relatif :

#récipient{
largeur : 960 px ;
arrière-plan :#fff ;
marge : 20 px automatique ;
remplissage : 10 px ;
position : relative ;
}

Positionnez-le en dehors de la boîte Il ne vous reste plus qu'à positionner le logo, en le positionnant horizontalement pour qu'il dépasse du conteneur.

#logo{
position : absolue ;
gauche : -15px ;
}

Maintenant, nous pouvons voir que le logo est affiché en dehors de la boîte.