Contrôler la longueur de trait et la distance entre les traits

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

Cet exemple ci-dessous s’affiche différemment entre les navigateurs:

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

Grandes différences: IE 11 / Firefox / Chrome

IE 11 frontièreFirefox BorderBordure chromée

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

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

    La valeur de propriété de bordure en pointillés native n’offre pas de contrôle sur les tirets eux-mêmes … alors mettez la propriété border-image !

    Préparez votre propre bordure avec border-image

    Compatibilité : Il offre une excellente prise en charge du navigateur (IE 11 et tous les navigateurs modernes). Une bordure normale peut être définie comme une solution de secours pour les anciens navigateurs.

    Créons ces

    Ces bordures afficheront exactement le même navigateur croisé!

    Exemple d'objectifExemple d'objectif avec des lacunes plus larges

    Étape 1 – Créez une image appropriée

    Cet exemple mesure 15 pixels de largeur sur 15 pixels de hauteur et les écarts sont actuellement de 5 pixels de largeur. C’est un .png avec transparence.

    Voici à quoi cela ressemble dans photoshop lorsque vous effectuez un zoom avant:

    Exemple d'arrière-plan d'image de bordure gonflé

    Voici à quoi cela ressemble à l’échelle:

    Exemple d'image d'arrière-plan Taille réelle

    Contrôle de l’écart et de la longueur de course

    Pour créer des espaces ou des traits plus larges / plus courts, élargissez / raccourcissez les espaces ou les traits de l’image.

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

    Grands écarts correctement mis à l’échelle = Des écarts plus importants à l'échelle

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

    1. Définir la source-image-frontière :

       border-image-source:url("http://i.stack.imgur.com/wLdVc.png"); 
    2. Facultatif – Définissez le border-image-width :

       border-image-width: 1; 

      La valeur par défaut est 1. Il peut également être défini avec une valeur de pixel, un pourcentage ou un autre multiple (1x, 2x, 3x, etc.). Cela remplace tout jeu de border-width .

    3. Définissez la frontière-image-slice :

      Dans cet exemple, l’épaisseur des bordures supérieure, droite, inférieure et gauche des images est de 2px, et il n’ya pas d’espace à l’extérieur, donc notre valeur de tranche est 2:

       border-image-slice: 2; 

      Les tranches ressemblent à ceci, 2 pixels du haut, de droite, du bas et de gauche:

      Exemple de tranches

    4. Définir le border-image-repeat :

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

       border-image-repeat: round; 

    Écriture en sténographie

    Les propriétés ci-dessus peuvent être définies individuellement ou en abrégé à l’aide de border-image :

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

    Exemple complet

    Notez la border: dashed 4px #000 repli. Les navigateurs non compatibles recevront cette bordure.

     .bordered { display: inline-block; padding: 20px; /* Fallback dashed border - the 4px width here is overwritten with the border-image-width (if set) - the border-image-width can be omitted below if it is the same as the 4px here */ border: dashed 4px #000; /* Individual border image properties */ border-image-source: url("http://i.stack.imgur.com/wLdVc.png"); border-image-slice: 2; border-image-repeat: round; /* or use the shorthand border-image */ border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round; } /*The border image of this one creates wider gaps*/ .largeGaps { border-image-source: url("http://i.stack.imgur.com/LKclP.png"); margin: 0 20px; } 
     
    This is bordered!
    This is bordered and has larger gaps!

    En plus de la propriété border-image , il existe plusieurs autres façons de créer une bordure en pointillés avec contrôle de la longueur du trait et de la distance qui les sépare. Ils sont décrits ci-dessous:

    Méthode 1: Utiliser SVG

    Nous pouvons créer la bordure en pointillés en utilisant un path ou un élément polygon et en définissant la propriété stroke-dasharray . La propriété prend deux parameters où l’un définit la taille du tiret et l’autre détermine l’espace entre eux.

    Avantages:

    1. Les SVG par nature sont des graphiques évolutifs et peuvent s’adapter à toutes les dimensions du conteneur.
    2. Peut très bien fonctionner même s’il y a un border-radius . Il suffit de remplacer le path par un circle comme dans cette réponse (ou) de convertir le path en cercle.
    3. Le support du navigateur pour SVG est plutôt bon et le retour peut être fourni en utilisant VML pour IE8-.

    Les inconvénients:

    1. Lorsque les dimensions du conteneur ne changent pas proportionnellement, les chemins ont tendance à évoluer, ce qui entraîne un changement de taille du tiret et de l’espace entre eux (essayez de survoler la première case de l’extrait de code). Cela peut être contrôlé en ajoutant vector-effect='non-scaling-stroke' (comme dans la deuxième case), mais la prise en charge du navigateur pour cette propriété 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; } 
     
    Some content
    Some content

    Bref: non, ce n’est pas le cas. Vous devrez travailler avec des images à la place.