Controllare la lunghezza della corsa bordo tratteggiato e la distanza tra i tratti

Question

E 'possibile controllare la lunghezza e la distanza tra i tratti di confine tratteggiate in CSS?

Questo esempio sotto visualizza diverso tra i browser:

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

<div>I have a dashed border!</div>

differenze Big: IE 11 / Firefox / Chrome

Ci sono metodi che possono fornire un maggiore controllo della comparsa confini tratteggiati?

Answer 1

Css di rendering è il browser specifico e non so alcuna messa a punto su di esso, si dovrebbe lavorare con le immagini, come raccomandato dal Ham. Riferimento: http://www.w3.org/TR/CSS2 /box.html#border-style-properties

Answer 2

Il tratteggiato valore nativo proprietà border non offre il controllo sui trattini stessi ... in modo da portare sulla proprietà border-image!

Brew il proprio confine con border-image

Compatibilità : Offre grande supporto del browser (IE 11 e tutti i browser moderni) . Un bordo normale può essere impostato come un ripiego per i browser più vecchi.

Creiamo questi

Questi confini mostrerà esattamente la stessa cross-browser!

Passaggio 1 - Creare un'immagine adatta

Questo esempio è largo 15 pixel per 15 pixel di altezza e le lacune sono attualmente 5px di larghezza. E 'un .png con la trasparenza.

Questo è quello che sembra in Photoshop utilizzando lo zoom in:

Questo è quello che sembra in scala:

Controllo gap e ictus lunghezza

Per creare lacune più ampie / più brevi o ictus, ampliare / accorciare le lacune o ictus nell'immagine.

Ecco un'immagine con più ampie 10px lacune:

correttamente in scala =

Passaggio 2 - Creare il CSS - questo esempio richiede 4 passaggi fondamentali

1. border-immagine-source :

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

2. opzionale - Definire il -image larghezza :

   border-image-width: 1;
   

   Il valore predefinito è 1. Può anche essere impostato con un valore di pixel, valore percentuale, o come un altro multipla (1x, 2x, 3x, ecc). Ciò ignora qualsiasi insieme border-width.

3. border-image-slice :

   In questo esempio, lo spessore del piano immagini, destro, inferiore e bordi sinistro è 2px, e non v'è alcuno spazio al di fuori di essi, così il nostro valore fetta è 2:

   border-image-slice: 2; 
   

   Le fette simile a questa, 2 pixel dalla parte superiore, a destra, in basso ea sinistra:

   

4. border-image-repeat :

   In questo esempio, vogliamo che il modello a ripetersi in modo uniforme in tutto il nostro div. Così abbiamo scelto:

   border-image-repeat: round;
   

La scrittura abbreviata

Le proprietà di cui sopra può essere impostato singolarmente, o in abbreviata utilizzando :

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

Esempio completo

Si noti il ??fallback border: dashed 4px #000. Non sostenere i browser riceverà questo confine.

.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

Oltre alla proprietà border-image, ci sono alcuni altri modi per creare un bordo tratteggiato il controllo sulla lunghezza della corsa e la distanza tra di loro. Essi sono descritti di seguito:

Metodo 1: Utilizzo di SVG

Possiamo creare il bordo tratteggiato utilizzando un path o un elemento polygon e impostando il stroke-dasharray proprietà. La struttura prende due parametri in cui si definisce la dimensione del cruscotto e l'altra determina lo spazio tra di loro.

Pro:

1. SVG per natura sono grafici sono scalabili e possono adattarsi a qualsiasi dimensione del contenitore.
2. Può funzionare molto bene anche se c'è un border-radius coinvolti. Avremmo semplicemente sostituire il path con un circle come in questa risposta (o) convertire il path in un cerchio.
3. Browser supportati per SVG è piuttosto buona e fallback può essere fornita utilizzando VML per IE8- .

Contro:

1. Quando le dimensioni del contenitore non cambiano proporzionalmente, i percorsi tendono a scalare un conseguente cambiamento nella dimensione del cruscotto e lo spazio tra di loro (provate bilico sulla prima casella nel frammento). Questo può essere controllato con l'aggiunta di vector-effect='non-scaling-stroke' (come nel secondo riquadro), ma il supporto del browser per questa proprietà è pari a zero in 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>

---

Metodo 2: Uso dei gradienti

Possiamo usare immagini multiple linear-gradient di sfondo e la posizione in modo appropriato per creare un effetto di bordo tratteggiato. Questo può anche essere fatto con un repeating-linear-gradient ma non c'è molto perfezionata per usando un gradiente ripetendo come abbiamo bisogno ogni sfumatura a ripetizione in una sola direzione.

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

Pro:

1. scalabile e può adattarsi anche se le dimensioni del contenitore sono dinamici.
2. non fa uso di pseudo-elementi extra che significa che possono essere tenuti da parte per qualsiasi altro uso potenziale.

Contro:

1. Browser supportati per gradienti lineari è relativamente più bassa e questo è un no-go se si vuole sostenere IE 9-. Anche le librerie come CSS3 PIE non supportano la creazione di modelli di gradiente in IE8 -.
2. Non può essere utilizzato quando border-radius è coinvolto perché sfondi non lo fanno sulla base di curva border-radius. Vengono invece tagliati.

---

Metodo 3: Box Shadows

può creare un piccolo bar (a forma di cruscotto) utilizzando pseudo-elementi e quindi creare più versioni box-shadow di esso per creare un bordo come nel seguito frammento.

Se il cruscotto è una forma quadrata poi un unico pseudo-elemento sarebbe sufficiente, ma se si tratta di un rettangolo, avremmo bisogno di uno pseudo-elemento per i primi + bordi inferiori e un altro per SINISTRO + confini di destra. Questo perché l'altezza e la larghezza per il trattino sul bordo superiore sarà diverso da quello a sinistra.

Pro:

1. Le dimensioni del cruscotto è controllabile variando le dimensioni della pseudo-elemento. La spaziatura è controllabile modificando lo spaziotra ogni ombra.
2. Un effetto molto unico può essere prodotta aggiungendo un colore diverso per ogni scatola ombra.

Contro:

1. Poiché abbiamo impostare manualmente le dimensioni del cruscotto e la spaziatura, questo approccio non è buono quando le dimensioni della scatola principale è dinamica.
2. IE8 ed inferiori non supporto scatola di ombra . Tuttavia, questo può essere superato utilizzando librerie come CSS3 PIE.
3. Può essere utilizzato con border-radius ma posizionandoli sarebbe molto difficile con dover trovare i punti su un cerchio (e forse anche 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

corta: No, non lo è. Si dovrà lavorare con le immagini, invece.