È possibile controllare la lunghezza e la distanza tra i tratti del bordo tratteggiato in CSS?

Questo esempio di seguito viene visualizzato in modo diverso tra i browser:

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

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

Grandi differenze: IE 11 / Firefox / Chrome

Esistono metodi in grado di fornire un maggiore controllo dell'aspetto dei bordi tratteggiati?

Il rendering CSS è specifico del browser e non conosco alcuna regolazione fine, dovresti lavorare con le immagini come raccomandato da Ham. Riferimento: http://www.w3.org/TR/CSS2/box.html#border-style-properties

Il valore della proprietà del bordo tratteggiato nativo non offre il controllo sui trattini stessi ... quindi porta la border-imageproprietà!

Crea il tuo confine con border-image

Compatibilità : offre un ottimo supporto del browser (IE 11 e tutti i browser moderni). È possibile impostare un bordo normale come riserva per i browser meno recenti.

Creiamo questi

Questi bordi mostreranno esattamente lo stesso cross-browser!

Passaggio 1: creare un'immagine adatta

Questo esempio è largo 15 pixel per 15 pixel di altezza e gli spazi sono attualmente larghi 5 px. È un .png con trasparenza.

Ecco come appare in Photoshop quando ingrandito:

Ecco come appare in scala:

Controllo della distanza e della lunghezza della corsa

Per creare spazi o tratti più ampi / più corti, allargare / accorciare gli spazi o i tratti nell'immagine.

Ecco un'immagine con spazi più ampi di 10 px:

correttamente ridimensionato =

Passaggio 2: creare il CSS: questo esempio richiede 4 passaggi di base

1. Definisci l' origine dell'immagine del bordo :

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

2. Facoltativo : definire la larghezza dell'immagine del bordo :

   border-image-width: 1;

   Il valore predefinito è 1. Può anche essere impostato con un valore in pixel, un valore percentuale o un altro multiplo (1x, 2x, 3x ecc.). Questo sovrascrive qualsiasi border-widthset.

3. Definisci la sezione di immagine del bordo :

   In questo esempio, lo spessore dei bordi superiore, destro, inferiore e sinistro delle immagini è 2px e non c'è spazio al di fuori di essi, quindi il nostro valore di slice è 2:

   border-image-slice: 2; 

   Le sezioni hanno questo aspetto, a 2 pixel dall'alto, da destra, dal basso e da sinistra:

   

4. Definisci il bordo-immagine-ripetizione :

   In questo esempio, vogliamo che il pattern si ripeta in modo uniforme attorno al nostro div. Quindi scegliamo:

   border-image-repeat: round;

Scrivere stenografia

Le proprietà sopra possono essere impostate individualmente o in forma abbreviata utilizzando border-image :

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

Esempio completo

Nota il border: dashed 4px #000fallback. I browser non supportati riceveranno questo bordo.

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

Oltre alla border-imageproprietà, ci sono alcuni altri modi per creare un bordo tratteggiato con il controllo sulla lunghezza del tratto e sulla distanza tra loro. Sono descritti di seguito:

Metodo 1: utilizzo di SVG

Possiamo creare il bordo tratteggiato utilizzando pathun polygonelemento o e impostando la stroke-dasharrayproprietà. La proprietà accetta due parametri in cui uno definisce la dimensione del trattino e l'altro determina lo spazio tra di loro.

Professionisti:

1. Gli SVG per natura sono grafici scalabili e possono adattarsi a qualsiasi dimensione del contenitore.
2. Può funzionare molto bene anche se è border-radiuscoinvolto. Dovremmo semplicemente sostituire il pathcon un circlesimile in questa risposta (o) convertire il pathin un cerchio.
3. Il supporto del browser per SVG è abbastanza buono e il fallback può essere fornito utilizzando VML per IE8-.

Contro:

1. Quando le dimensioni del contenitore non cambiano proporzionalmente, i percorsi tendono a ridimensionarsi con conseguente modifica delle dimensioni del trattino e dello spazio tra di essi (prova a passare il mouse sulla prima casella dello snippet). Questo può essere controllato aggiungendo vector-effect='non-scaling-stroke'(come nella seconda casella) ma il supporto del browser per questa proprietà è nullo 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: utilizzo delle sfumature

Possiamo utilizzare più linear-gradientimmagini di sfondo e posizionarle in modo appropriato per creare un effetto bordo tratteggiato. Questo può essere fatto anche con a, repeating-linear-gradientma non ci sono molti miglioramenti a causa dell'uso di un gradiente ripetuto poiché abbiamo bisogno che ogni gradiente si ripeta 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>

Professionisti:

1. Scalabile e adattabile anche se le dimensioni del contenitore sono dinamiche.
2. Non fa uso di pseudo-elementi extra, il che significa che possono essere tenuti da parte per qualsiasi altro potenziale utilizzo.

Contro:

1. Il supporto del browser per i gradienti lineari è relativamente inferiore e questo è un no-go se si desidera supportare 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é gli sfondi non si curvano in base a border-radius. Invece vengono tagliati.

Metodo 3: Box Shadows

Possiamo creare una piccola barra (a forma di trattino) usando pseudo-elementi e quindi crearne più box-shadowversioni per creare un bordo come nello snippet sottostante.

Se il trattino è di forma quadrata, sarebbe sufficiente un singolo pseudo-elemento, ma se è un rettangolo, avremmo bisogno di uno pseudo-elemento per i bordi superiore + inferiore e un altro per i bordi sinistro + destro. Questo perché l'altezza e la larghezza del trattino sul bordo superiore saranno diverse da quelle a sinistra.

Professionisti:

1. Le dimensioni del trattino sono controllabili modificando le dimensioni dello pseudo-elemento. La spaziatura è controllabile modificando lo spazio tra ogni ombra.
2. È possibile ottenere un effetto davvero unico aggiungendo un colore diverso per ciascuna ombra della scatola.

Contro:

1. Dato che dobbiamo impostare manualmente le dimensioni del trattino e la spaziatura, questo approccio non è valido quando le dimensioni del riquadro principale sono dinamiche.
2. IE8 e versioni precedenti non supportano il box shadow . Tuttavia, questo può essere superato utilizzando librerie come CSS3 PIE.
3. Possono essere usati con border-radiusma posizionarli sarebbe molto complicato se dovessi trovare 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>

Breve: No, non lo è. Dovrai invece lavorare con le immagini.

C'è un fantastico strumento creato da @kovart chiamato generatore di bordi tratteggiati .

Usa un svg come immagine di sfondo per consentire l'impostazione dell'array di trattini del tratto desiderato ed è piuttosto conveniente.

Dovresti quindi usarlo semplicemente come proprietà di sfondo sul tuo elemento al posto del bordo:

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

La lunghezza del tratto dipende dalla larghezza del tratto. È possibile aumentare la lunghezza aumentando la larghezza e nascondere parte del bordo per elemento interno.

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
}

https://jsfiddle.net/ok6srt2z/

Di recente ho avuto lo stesso problema.

Sono riuscito a risolverlo con due div assolutamente posizionati portando il bordo (uno per l'orizzontale e uno per il verticale), e poi trasformandoli. La scatola esterna deve solo essere posizionata relativamente.

<div class="relative">
    <div class="absolute absolute--fill overflow-hidden">
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 4px 0px 4px 0px;
                transform: scaleX(2);
        "></div>
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 0px 4px 0px 4px;
                transform: scaleY(2);
        "></div>
    </div>

    <div> {{Box content goes here}} </div>
</div>

Nota: ho usato i tachioni in questo esempio, ma immagino che le classi si spieghino da sole.

Questo creerà un bordo arancione e grigio usando class = "myclass" sul div.

.myclass {
    outline:dashed darkorange  12px;
    border:solid slategray  14px;
    outline-offset:-14px;
}