Contrôle de la longueur de la course en pointillés à la frontière et la distance entre les coups

Question

Est-il possible de contrôler la longueur et la distance entre les traits interrompus à la frontière 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>

De grandes différences: IE 11 / Firefox / Chrome

Y a-t-il des méthodes qui peuvent fournir un meilleur contrôle des frontières pointillées apparence?

Answer 1

Css rendu est spécifique du navigateur et je ne sais pas tuning amende, vous devez travailler avec des images comme recommandé par Ham. Référence: http://www.w3.org/TR/CSS2 /box.html#border-style-properties

Answer 2

La valeur de la propriété tiretée frontière native ne permet pas de contrôle sur les traits eux-mêmes ... donc mettre sur la propriété border-image!

Brew votre propre frontière avec border-image

Compatibilité : Il offre (IE 11 et tous les navigateurs modernes) . Une bordure normale peut être définie comme une solution de repli pour les anciens navigateurs.

Créons ces

Ces frontières affiche exactement la même cross-browser!

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

Cet exemple est de 15 pixels de large par 15 pixels de haut et les lacunes sont actuellement 5px large. Il est un .png avec la transparence.

Voici à quoi il ressemble dans Photoshop quand zoomé:

Voici à quoi il ressemble à l'échelle:

Contrôle de longueur d'espace et la course

Pour créer plus larges / lacunes ou des courses plus courtes, élargir / raccourcir les lacunes ou les accidents vasculaires cérébraux dans l'image.

Voici une image plus large 10px lacunes:

correctement mis à l'échelle =

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

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

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

2. option - Définir le frontière -image largeur :

   border-image-width: 1;
   

   La valeur par défaut est 1. Il peut aussi être mis à une valeur de pixel, la valeur de pourcentage, ou un autre multiple (1x, 2x, 3x, etc.). Cette opération remplace tout ensemble de border-width.

3. Définir la border-image tranche :

   Dans cet exemple, l'épaisseur des images en haut, à droite, en bas et bordures gauche est 2px, et il n'y a pas d'écart en dehors d'eux, donc notre valeur de tranche est 2:

   border-image-slice: 2; 
   

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

   

4. Définir la border-image répétition:

   Dans cet exemple, nous voulons que le modèle se répète de façon uniforme autour de notre div. Donc, nous choisissons:

   border-image-repeat: round;
   

raccourci d'écriture

Les propriétés ci-dessus peut être réglée individuellement, ou en utilisant un raccourci :

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

Exemple complet

Notez la fallback border: dashed 4px #000. les navigateurs non-soutien recevra cette frontière.

.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>

Answer 3

En plus de la propriété border-image, il y a quelques autres façons de créer une frontière avec le contrôle de trait interrompu la longueur de la course et la distance entre eux. Ils sont décrits ci-dessous:

Méthode 1: Utiliser SVG

Nous pouvons créer la frontière en utilisant un trait interrompu path ou un élément polygon et réglage de stroke-dasharray propriété. La propriété prend deux paramètres où l'on définit la taille du tableau de bord et l'autre détermine l'espace entre eux.

Plus:

1. SVGs par la nature sont graphiques évolutifs et peuvent adapter à toutes les dimensions de conteneurs.
2. peut très bien même s'il y a un border-radius impliqué. Nous voudrions simplement avoir remplacer le path avec un circle comme dans cette réponse (ou) convertir le path en cercle.
3. du navigateur pour le soutien SVG est assez bon et peut être fourni en utilisant fallback VML pour IE8- .

Inconvénients:

1. Lorsque les dimensions du conteneur ne, les chemins ont tendance changent pas proportionnellement à l'échelle entraînant un changement de taille du tableau de bord et l'espace entre eux (essayer en vol stationnaire sur la première case dans l'extrait). Ceci peut être contrôlé en ajoutant vector-effect='non-scaling-stroke' (comme dans la deuxième case) mais le support 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 Dégradés

Nous pouvons utiliser plusieurs images d'arrière-plan et la position linear-gradient manière appropriée pour créer un effet de bordure en pointillés. Cela peut aussi être fait avec un repeating-linear-gradient, mais il n'y a pas beaucoup d'amélioration en raison de l'utilisation d'un gradient de répéter que nous avons besoin de chaque gradient à répétition 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>

Plus:

1. évolutive et peut adapter même si les dimensions du conteneur sont dynamiques.
2. Ne pas faire usage de tous les pseudo-éléments supplémentaires qui signifie qu'ils peuvent être mis de côté pour toute autre utilisation potentielle.

Inconvénients:

1. support navigateur pour les gradients linéaires est relativement faible, ce qui est un non-go si vous veulent soutenir IE 9-. Même les bibliothèques comme CSS3 PIE ne prennent pas en charge la création de modèles gradient dans IE8 -.
2. Ne peut pas être utilisé lorsque border-radius est impliqué d'arrière-plans ne courbe pas basée sur border-radius. Ils se rognées à la place.

---

Méthode 3: Ombres Box

Nous pouvons créer un petit bar (sous la forme du tableau de bord) en utilisant des pseudo-éléments puis créer plusieurs versions de box-shadow de celui-ci pour créer une bordure comme dans l'extrait ci-dessous.

Si le tableau de bord est une forme carrée puis un pseudo-élément serait suffisant, mais si elle est un rectangle, nous aurions besoin d'un pseudo-élément pour les haut + bas frontières et une autre pour les bordures gauche + droite. En effet, la hauteur et la largeur du tableau de bord sur la bordure supérieure sera différent de celui sur la gauche.

Plus:

1. Les dimensions du tableau de bord peut être commandé en modifiant les dimensions de la pseudo-élément. L'espacement peut être commandée en modifiant l'espaceentre chaque ombre.
2. Un effet unique peut être produit en ajoutant une couleur différente pour chaque ombre de la boîte.

Inconvénients:

1. Puisque nous devons définir manuellement les dimensions du tableau de bord et l'espacement, cette approche est pas bonne lorsque les dimensions de la boîte mère est dynamique.
2. IE8 et inférieur ne pas box shadow support . Cependant, cela peut être surmonté en utilisant les bibliothèques comme CSS3 PIE.
3. Peut être utilisé avec border-radius mais leur positionnement serait très difficile d'avoir à trouver des points sur un cercle (et peut-être 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>

Answer 4

courte: Non, ce n'est pas. Vous devrez travailler avec des images au lieu.