Comment augmenter l'espace entre les points de la bordure en pointillés ?

Question

J'utilise une bordure en pointillés dans ma boîte comme suit

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

Je veux augmenter l'espace entre chaque point de la bordure.

Answer 1

Cette astuce fonctionne aussi bien pour les bordures horizontales que verticales :

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

Vous pouvez régler la taille avec background-size et la proportion avec les pourcentages du gradient linéaire. Dans cet exemple, j'ai une ligne pointillée de 1px de points et 2px d'espacement. De cette façon, vous pouvez aussi avoir plusieurs bordures en pointillés en utilisant plusieurs arrière-plans.

Essayez-le dans ce JSFiddle ou regardez l'exemple de l'extrait de code :

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}

<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

Answer 2

Voici une astuce que j'ai utilisée sur un projet récent pour réaliser presque tout ce que je veux avec des bordures horizontales. J'utilise <hr/> chaque fois que j'ai besoin d'une bordure horizontale. La méthode de base pour ajouter une bordure à ce fichier est la suivante

 hr {border-bottom: 1px dotted #000;}

Mais si vous voulez prendre le contrôle de la bordure et, par exemple, augmenter l'espace entre les points, vous pouvez essayer quelque chose comme ceci :

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

Et dans la suite, vous créez votre bordure (voici un exemple avec des points)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

Cela signifie également que vous pouvez ajouter des ombres de texte aux points, aux dégradés, etc. Tout ce que vous voulez...

Eh bien, cela fonctionne très bien pour les bordures horizontales. Si vous avez besoin de bordures verticales, vous pouvez spécifier une classe pour un autre hr et utiliser le CSS3 rotation propriété.

Answer 3

Vous ne pouvez pas le faire avec du pur CSS - le Spécification CSS3 a même une citation spécifique à ce sujet :

Remarque : il n'y a aucun contrôle sur l'espacement des points et des tirets, ni sur la longueur des tirets. Les implémentations sont encouragées à choisir un espacement qui rend les coins symétriques.

Vous pouvez toutefois utiliser soit une image de bordure ou une image de fond qui fait l'affaire.

Answer 4

Voir le Documents MDN pour les valeurs disponibles pour border-style :

• none : Pas de bordure, définit la largeur à 0. C'est la valeur par défaut.

• hidden : Identique à 'none', sauf en ce qui concerne la résolution des conflits de bordure. résolution des conflits de bordure pour les éléments éléments.
• en pointillés : Série de courts tirets ou de segments de ligne.
• pointillés : Série de points.
• double : Deux lignes droites droites qui s'ajoutent à la quantité de pixels définie comme largeur de la bordure.
• rainure : Effet sculpté.
• inset : fait apparaître la boîte apparaît encastrée.
• outset : Opposé à inset ". Donne l'impression que la boîte est en 3D (gaufré).
• crête : Opposé à rainure'. La bordure apparaît en 3D (sortant).
• solide : Simple, ligne droite et solide.

En dehors de ces choix, il n'y a aucun moyen d'influencer le style de la bordure standard.

Si les possibilités qui y sont offertes ne vous conviennent pas, vous pouvez pourrait utiliser la technologie CSS3 border-image mais notez que la prise en charge par les navigateurs est encore très aléatoire ( EDIT : Support du navigateur est valable à partir de 2020).

Answer 5

Réponse courte : Vous ne pouvez pas.

Vous devrez utiliser border-image et quelques images.