Contrôlez la longueur de la ligne en pointillés du bord et la distance entre les lignes

Question

Est-il possible de contrôler la longueur et la distance entre les traits de bordure en pointillés en CSS ?

Cet exemple ci-dessous s'affiche différemment selon les navigateurs :

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

J'ai une bordure en pointillés !

Grandes différences : IE 11 / Firefox / Chrome

Existe-t-il des méthodes permettant de mieux contrôler l'apparence des bordures en pointillés ?

Answer 1

La valeur de propriété de bordure en pointillés native ne permet pas de contrôler les pointillés eux-mêmes... alors vive la propriété border-image !

Créez votre propre bordure avec border-image

Compatibilité : Il offre un excellent support des navigateurs (IE 11 et tous les navigateurs modernes). Une bordure normale peut être définie comme alternative pour les navigateurs plus anciens.

Créons-les

Ces bordures s'afficheront exactement de la même manière sur tous les navigateurs !

Étape 1 - Créez une image adaptée

Cet exemple mesure 15 pixels de large sur 15 pixels de haut et les écarts ont actuellement une largeur de 5px. Il s'agit d'un fichier .png avec de la transparence.

Voici à quoi cela ressemble dans Photoshop zoomé :

Voici à quoi cela ressemble à l'échelle :

Contrôler l’écart et la longueur de la bordure

Pour créer des écarts ou des traits plus larges / plus courts, élargissez / raccourcissez les écarts ou les traits dans l'image.

Voici une image avec des écarts plus larges de 10px :

correctement mise à l'échelle =

Étape 2 - Créez le CSS — cet exemple nécessite 4 étapes de base

1. Définissez la source de l'image de bordure:

    border-image-source:url("https://i.stack.imgur.com/wLdVc.png");  

2. Facultatif - Définissez la largeur de l'image de bordure:

    border-image-width: 1;

   La valeur par défaut est 1. Elle peut également être définie avec une valeur en pixels, en pourcentage ou comme un autre multiple (1x, 2x, 3x, etc). Cela remplace toute valeur de border-width définie.

3. Définissez la partie de l'image de bordure:

Dans cet exemple, l'épaisseur des bordures supérieure, droite, inférieure et gauche de l'image est de 2px, et il n'y a aucun écart à l'extérieur d'elles, donc notre valeur de découpe est 2 :

    border-image-slice: 2; 

Les découpes ressemblent à ceci, 2 pixels du haut, de la droite, du bas et de la gauche :

4. Définissez la répétition de l'image de bordure:

Dans cet exemple, nous voulons que le motif se répète de manière homogène autour de notre div. Nous choisissons donc :

    border-image-repeat: round;

Écriture abrégée

Les propriétés ci-dessus peuvent être définies individuellement ou ensemble de manière abrégée en utilisant border-image:

border-image: url("https://i.stack.imgur.com/wLdVc.png") 2 round;

Exemple complet

Note : border-style doit être défini sur une valeur telle que solid ou dashed car le style de bordure initial est none. Alternativement, vous pouvez ajouter une bordure de secours, telle que border: dashed 4px #000 dans cet exemple, pour que les navigateurs non pris en charge reçoivent cette bordure.

.bordered {
  display: inline-block;
  padding: 20px;
  /* Optionnel : 
     Une bordure en pointillés normale peut être définie comme alternative, notamment si les anciens navigateurs doivent être pris en charge. Remarques :
     - la largeur 4px ici est écrasée avec n'importe quelle valeur de border-image-width
     - une border-image-width peut être omise si elle a la même valeur que la largeur de la bordure en pointillés
  */
  border: dashed 4px #000;/*facultatif*/

  /* la valeur initiale de border-style est "none", elle doit donc être définie sur une valeur différente pour que l'image de bordure s'affiche*/
  border-style: dashed;

  /* Propriétés d'image de bordure individuelles */
  border-image-source: url("https://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;

  /* ou utilisez l'écriture abrégée de l'image de bordure */
  border-image: url("https://i.stack.imgur.com/wLdVc.png") 2 round;
}

/*L'image de bordure de celui-ci crée des écarts plus larges*/

.largeGaps {
  border-image-source: url("https://i.stack.imgur.com/LKclP.png");
  margin: 0 20px;
}

Ceci est bordé !

Ceci est bordé et a des écarts plus larges !

Answer 2

En plus de la border-image il existe d'autres façons de créer une bordure en pointillés en contrôlant la longueur du trait et la distance entre les pointillés. Elles sont décrites ci-dessous :

Méthode 1 : Utilisation de SVG

Nous pouvons créer la bordure en pointillés en utilisant un élément path ou un polygon et de définir l'élément stroke-dasharray propriété. Cette propriété prend en compte deux paramètres, l'un définissant la taille du tiret et l'autre l'espace entre les tirets.

Pour :

1. Les SVG sont par nature des graphiques évolutifs et peuvent s'adapter à n'importe quelle dimension de conteneur.
2. Peut très bien fonctionner même s'il y a une border-radius impliqué. Nous n'aurions qu'à remplacer le path avec un circle comme dans cette réponse (ou) convertir le path dans un cercle.
3. Prise en charge du SVG par les navigateurs est assez bon et une solution de repli peut être fournie en utilisant VML pour IE8-.

Cons :

1. Lorsque les dimensions du conteneur ne changent pas proportionnellement, les chemins ont tendance à se redimensionner, ce qui entraîne une modification de la taille des tirets et de l'espace qui les sépare (essayez de passer la souris sur la première boîte dans l'extrait). Ce phénomène peut être contrôlé en ajoutant vector-effect='non-scaling-stroke' (comme dans le deuxième encadré), mais la prise en charge de cette propriété par le navigateur est nulle dans IE.

   .dashed-vector { position: relative; height: 100px; width: 300px; } svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } path{ fill: none; stroke: blue; stroke-width: 5; stroke-dasharray: 10, 10; } span { position: absolute; top: 0px; left: 0px; padding: 10px; }

   / just for demo /

   div{ margin-bottom: 10px; transition: all 1s; } div:hover{ height: 100px; width: 400px; }

   <div class='dashed-vector'> <svg viewBox='0 0 300 100' preserveAspectRatio='none'> <path d='M0,0 300,0 300,100 0,100z' /> </svg> <span>Some content</span> </div>

   <div class='dashed-vector'> <svg viewBox='0 0 300 100' preserveAspectRatio='none'> <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/> </svg> <span>Some content</span> </div>

---

Méthode 2 : Utilisation des dégradés

Nous pouvons utiliser plusieurs linear-gradient et les positionner de manière appropriée pour créer un effet de bordure en pointillés. Cette opération peut également être réalisée à l'aide d'un repeating-linear-gradient mais l'utilisation d'un gradient répétitif n'apporte pas beaucoup d'améliorations, car chaque gradient ne doit se répéter que dans une seule direction.

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

Pour :

1. Évolutif et capable de s'adapter même si les dimensions du conteneur sont dynamiques.
2. Il n'utilise pas de pseudo-éléments supplémentaires, ce qui signifie qu'ils peuvent être mis de côté pour d'autres utilisations potentielles.

Cons :

1. Prise en charge des dégradés linéaires par les navigateurs est comparativement plus faible et c'est une erreur si vous voulez supporter IE 9-. Même des bibliothèques comme CSS3 PIE ne permettent pas de créer des motifs de dégradé dans IE8-.
2. Ne peut être utilisé lorsque border-radius est impliqué parce que les arrière-plans ne se courbent pas en fonction de l'âge de l'enfant. border-radius . Au lieu de cela, ils sont coupés.

---

Méthode 3 : ombres en boîte

Nous pouvons créer une petite barre (en forme de tiret) à l'aide de pseudo-éléments, puis créer de multiples box-shadow pour créer une bordure comme dans l'extrait ci-dessous.

Si le tiret est de forme carrée, un seul pseudo-élément suffit, mais s'il s'agit d'un rectangle, il faut un pseudo-élément pour les bordures supérieure et inférieure et un autre pour les bordures gauche et droite. En effet, la hauteur et la largeur du tiret de la bordure supérieure seront différentes de celles de la bordure gauche.

Pour :

1. Les dimensions du tiret peuvent être contrôlées en modifiant les dimensions du pseudo-élément. L'espacement est contrôlable en modifiant l'espace entre chaque ombre.
2. Il est possible d'obtenir un effet très unique en ajoutant une couleur différente pour chaque ombre de boîte.

Cons :

1. Comme nous devons définir manuellement les dimensions du tiret et de l'espacement, cette approche n'est pas efficace lorsque les dimensions de la boîte parentale sont dynamiques.
2. IE8 et les versions inférieures ne le font pas boîte de support ombre . Toutefois, ce problème peut être résolu en utilisant des bibliothèques telles que CSS3 PIE.

3. Peut être utilisé avec border-radius mais leur positionnement serait très délicat, car il faudrait trouver des points sur un cercle (et peut-être même des points de référence). transform ).

   .dashed-box-shadow{ position: relative; height: 120px; width: 120px; padding: 10px; } .dashed-box-shadow:before{ / for border top and bottom / position: absolute; content: ''; top: 0px; left: 0px; height: 3px; / height of the border top and bottom / width: 10px; / width of the border top and bottom / background: blue; / border color / box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, / top border / 0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; / bottom border / } .dashed-box-shadow:after{ / for border left and right / position: absolute; content: ''; top: 0px; left: 0px; height: 10px; / height of the border left and right / width: 3px; / width of the border left and right / background: blue; / border color / box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, / left border / 110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; / right border / }

   <div class='dashed-box-shadow'>Some content</div>

Answer 3

Il existe un outil sympa créé par @kovart appelé le générateur de bordures en pointillés.

Il utilise un svg comme image de fond pour permettre de définir la série de pointillés que vous désirez, et c'est plutôt pratique.

Vous n'avez qu'à l'utiliser comme propriété de fond sur votre élément à la place de la bordure :

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

Answer 4

Court : Non, ce n'est pas le cas. Vous devrez travailler avec des images à la place.

Answer 5

Le rendu Css est spécifique au navigateur et je ne connais aucun réglage fin à ce sujet, vous devriez travailler avec des images comme recommandé par Ham. Référence: http://www.w3.org/TR/CSS2/box.html#border-style-properties