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
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
!
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.
Ces bordures afficheront exactement le même navigateur croisé!
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:
Voici à quoi cela ressemble à l’échelle:
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:
correctement mis à l’échelle =
Définir la source-image-frontière :
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
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
.
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:
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;
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:
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:
border-radius
. Il suffit de remplacer le path
par un circle
comme dans cette réponse (ou) de convertir le path
en cercle. Les inconvénients:
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.