web-dev-qa-db-fra.com

Contrôle de la longueur et de la distance de trait de bordure en pointillés

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 affiche différemment entre les navigateurs:

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

Grandes différences: IE 11/Firefox/Chrome

IE 11 borderFirefox BorderChrome border

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

csscss3bordercss-shapes
106
AntonAL

Le rendu Css est spécifique au navigateur et je ne sais pas comment le régler, vous devriez travailler avec les images comme recommandé par Ham. Référence: http://www.w3.org/TR/CSS2/box.html#border-style-properties

22
snowflake

La valeur de propriété de bordure pointillée native n'offre pas de contrôle sur les tirets eux-mêmes ... alors apportez le border-image propriété!

Préparez votre propre frontière avec border-image

Compatibilité : Il offre excellent support du navigateur (IE 11 et tous les navigateurs modernes). Une bordure normale peut être définie comme solution de secours pour les navigateurs plus anciens.

Créons ces

Ces frontières afficheront exactement le même navigateur croisé!

Goal exampleGoal example with wider gaps

Étape 1 - Créer une image appropriée

Cet exemple mesure 15 pixels de large sur 15 pixels de haut et les espaces sont actuellement de 5 pixels de large. C'est un fichier .png avec transparence.

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

Example Border Image Background Blown Up

Voici à quoi cela ressemble à l'échelle:

Example Border Image Background Actual Size

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

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

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

Larger gaps correctement mis à l'échelle = Larger gaps to scale

Étape 2 - Créer le CSS - Cet exemple nécessite 4 étapes de base

  1. Définissez le border-image-source :

    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, une valeur de pourcentage ou un autre multiple (1x, 2x, 3x, etc.). Ceci annule toute border-width ensemble.

  3. Définissez le border-image-slice :

    Dans cet exemple, l’épaisseur des bordures supérieure, droite, inférieure et gauche des images est de 2 pixels, et il n’ya pas d’espace en dehors d’elles, notre valeur de tranche est donc 2:

    border-image-slice: 2;

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

    Slices example

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

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

    border-image-repeat: round;

Rédaction d'un raccourci

Les propriétés ci-dessus peuvent être définies individuellement ou en abrégé avec border-image :

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

Exemple complet

Noter la border: dashed 4px #000 se retirer. 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;
}
<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>
136
misterManSam

En plus de border-image propriété, il existe quelques autres moyens de créer une bordure en pointillé avec un contrôle sur la longueur du trait et 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 élément path ou polygon et en définissant le paramètre stroke-dasharray propriété. La propriété prend deux paramètres, l'un définissant la taille du tiret et l'autre déterminant l'espace entre eux.

Avantages:

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

Inconvénients:

  1. Lorsque les dimensions du conteneur ne changent pas proportionnellement, les tracés ont tendance à s’échelonner, ce qui entraîne une modification de la taille du tiret et de l’espace entre eux (essayez de survoler la première case de l’extrait de code). Ceci 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;
}
<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 de dégradés

Nous pouvons utiliser plusieurs linear-gradient images de fond et positionnez-les de manière appropriée pour créer un effet de bordure en pointillé. Cela peut aussi être fait avec un repeating-linear-gradient mais il n’ya pas beaucoup d’amélioration grâce à l’utilisation d’un dégradé répétitif, car chaque dégradé doit être répété 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>

Avantages:

  1. Évolutif et peut s'adapter même si les dimensions du conteneur sont dynamiques.
  2. N'utilise pas de pseudo-éléments supplémentaires, ce qui signifie qu'ils peuvent être conservés de côté pour toute autre utilisation potentielle.

Inconvénients:

  1. Le support du navigateur pour les dégradés linéaires est comparativement plus bas et c’est impossible si vous voulez supporter IE 9-. Même les bibliothèques comme CSS3 PIE ne supportent pas la création de motifs de dégradé dans IE8-.
  2. Ne peut pas être utilisé quand border-radius est impliqué car les arrière-plans ne sont pas courbés sur border-radius. Ils sont coupés à la place.

Méthode 3: Box Shadows

Nous pouvons créer une petite barre (en forme de tiret) en utilisant des pseudo-éléments, puis créer plusieurs box-shadow _ versions pour créer une bordure comme dans l'extrait de code ci-dessous.

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

Avantages:

  1. Les dimensions du tiret sont contrôlables en modifiant les dimensions du pseudo-élément. L'espacement est contrôlable en modifiant l'espace entre chaque ombre.
  2. Un effet tout à fait unique peut être produit en ajoutant une couleur différente pour chaque ombre de la boîte.

Inconvénients:

  1. Étant donné que nous devons définir manuellement les dimensions du tiret et de l'espacement, cette approche est inutile lorsque les dimensions de la zone parent sont dynamiques.
  2. IE8 et inférieur ne pas ombre de la boîte de support . Cependant, cela peut être surmonté en utilisant des bibliothèques telles que CSS3 PIE.
  3. Peut être utilisé avec border-radius mais il serait très difficile de les positionner de devoir trouver des points sur un cercle (et éventuellement même 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>
82
Harry

Bref: non, ce n'est pas. Vous devrez plutôt travailler avec des images.

21
Ham Vocke