Plus de contrôle sur les bordures CSS avec l'image en arrière-plan

Les frontières CSS standard offrent une personnalisation limitée pour les styles pointillés ou pointillés. Par exemple:

 .boîte {
   Border: 1px en pointillé noir;
   Border: 3px en pointillé rouge;
}

Cette approche manque de contrôle sur les longueurs de tableau de bord / écart, les angles, la décoloration ou l'animation. Cependant, les techniques intelligentes peuvent surmonter ces limites.

Le générateur de bordures en pointillé d'Amit Sheen montre une méthode puissante: en utilisant quatre arrière-plans multiples. La propriété background accepte les valeurs séparées des virgules. En définissant quatre arrière-plans (en haut, à droite, en bas, à gauche), chacun comme une bordure, un contrôle étendu est obtenu.

Exemple:

 .boîte {
  background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeugn-linear-gradient (180deg, # 333333, # 333333 10px, transparent 10px, transparent 20px, # 333333 20px), repeuting-linear-gradient (270deg, # 333333, # 3333333333333333333 20px);
  taille arrière: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
  Position d'arrière-plan: 0 0, 0 0, 100% 0, 0 100%;
  République de fond: sans répétition;
}

Cela déverrouille les options de style avancées auparavant indisponibles avec des frontières simples.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!