Magazine Internet

Ajouter une bordure double à vos images avec CSS

Publié le 19 mars 2008 par Dave Lizotte
Dans cette courte astuce, nous allons voir comment il est possible d'ajouter une bordure double Ă  vos images comme l'exemple ci-dessous.
  Bordure double Et non vous n'allez pas utiliser la propriété border-style:double. De cette manière, vous n'aurez aucun contrôle sur le look de cette bordure. Imaginer que vous désirez une bordure externe de 3 pixels d'épaisseur verte et une bordure interne de 1 pixel orange ? Comment ferez-vous avez le border-style ? Il vous sera impossible de le faire. Alors, voici comment réaliser ce truc.
  Nous allons donc utiliser ici la propriété border pour la bordure externe et ensuite nous allons truqué la bordure interne avec une combinaison des propriétés background et padding. Tout d'abord, commençons par ajouter la bordure à l'image.
  img{
   border:2px solid #72a143;
}
Ensuite voici le truc pour la 2e bordure.
img{
   border:2px solid #72a143;
   padding:1px;
   background:#ffeda5;
}
L'image recevra alors une seconde bordure de 1 pixel de la couleur de l'arrière-plan désigné par la propriété background.

Retour à La Une de Logo Paperblog

A propos de l’auteur


Dave Lizotte 57 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazine