Ist es möglich, die Länge und den Abstand zwischen gestrichelten Randstrichen in CSS zu steuern?

Das folgende Beispiel wird zwischen den Browsern unterschiedlich angezeigt:

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

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

Große Unterschiede: IE 11 / Firefox / Chrome

Gibt es Methoden, mit denen das Erscheinungsbild gestrichelter Ränder besser gesteuert werden kann?

CSS-Rendering ist browserspezifisch und ich kenne keine Feinabstimmung. Sie sollten mit Bildern arbeiten, wie von Ham empfohlen. Referenz: http://www.w3.org/TR/CSS2/box.html#border-style-properties

Der native Eigenschaftswert mit gestrichelten Rändern bietet keine Kontrolle über die Bindestriche selbst ... also bringen Sie die border-imageEigenschaft auf!

Brauen Sie Ihre eigene Grenze mit border-image

Kompatibilität : Es bietet hervorragende Browserunterstützung (IE 11 und alle modernen Browser). Ein normaler Rahmen kann als Fallback für ältere Browser festgelegt werden.

Lassen Sie uns diese erstellen

Diese Rahmen zeigen genau den gleichen Cross-Browser an!

Schritt 1 - Erstellen Sie ein geeignetes Bild

Dieses Beispiel ist 15 Pixel breit und 15 Pixel hoch und die Lücken sind derzeit 5 Pixel breit. Es ist ein PNG mit Transparenz.

So sieht es in Photoshop aus, wenn es vergrößert wird:

So sieht es aus, wenn man skaliert:

Kontrolle von Spalt und Hublänge

Um breitere / kürzere Lücken oder Striche zu erzeugen, vergrößern / verkürzen Sie die Lücken oder Striche im Bild.

Hier ist ein Bild mit größeren 10px Lücken:

richtig skaliert =

Schritt 2 - Erstellen des CSS - Dieses Beispiel erfordert 4 grundlegende Schritte

1. Definieren Sie die border-image-Quelle :

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

2. Optional - Definieren Sie die Rahmenbildbreite :

   border-image-width: 1;

   Der Standardwert ist 1. Er kann auch mit einem Pixelwert, einem Prozentwert oder einem anderen Vielfachen (1x, 2x, 3x usw.) festgelegt werden. Dies überschreibt jeden border-widthSatz.

3. Definieren Sie das Border-Image-Slice :

   In diesem Beispiel beträgt die Dicke der oberen, rechten, unteren und linken Bildränder 2 Pixel, und es gibt keine Lücke außerhalb der Ränder. Daher beträgt unser Schnittwert 2:

   border-image-slice: 2; 

   Die Scheiben sehen so aus, 2 Pixel von oben, rechts, unten und links:

   

4. Definieren Sie die Rahmenbildwiederholung :

   In diesem Beispiel möchten wir, dass sich das Muster gleichmäßig um unser div wiederholt. Also wählen wir:

   border-image-repeat: round;

Kurzschrift schreiben

Die obigen Eigenschaften können einzeln oder in Kurzform mithilfe des Rahmenbilds festgelegt werden :

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

Vollständiges Beispiel

Beachten Sie den border: dashed 4px #000Fallback. Nicht unterstützende Browser erhalten diesen Rahmen.

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

Zusätzlich zur border-imageEigenschaft gibt es einige andere Möglichkeiten, einen gestrichelten Rand mit Kontrolle über die Länge des Strichs und den Abstand zwischen ihnen zu erstellen. Sie werden nachfolgend beschrieben:

Methode 1: Verwenden von SVG

Wir können den gestrichelten Rand erstellen, indem wir ein pathoder ein polygonElement verwenden und die stroke-dasharrayEigenschaft festlegen. Die Eigenschaft verwendet zwei Parameter, wobei einer die Größe des Strichs definiert und der andere den Abstand zwischen ihnen bestimmt.

Vorteile:

1. SVGs sind von Natur aus skalierbare Grafiken und können an alle Containerabmessungen angepasst werden.
2. Kann sehr gut funktionieren, auch wenn es sich um einen handelt border-radius. Wir hätten nur die ersetzen müssenpathcircle in dieser Antwort ein Like (oder das pathin einen Kreis umwandeln) .
3. Die Browserunterstützung für SVG ist ziemlich gut und Fallback kann mit VML für IE8- bereitgestellt werden.

Nachteile:

1. Wenn sich die Abmessungen des Containers nicht proportional ändern, werden die Pfade tendenziell skaliert, was zu einer Änderung der Größe des Strichs und des Abstands zwischen ihnen führt (versuchen Sie, den Mauszeiger über das erste Feld im Snippet zu halten). Dies kann durch Hinzufügen gesteuert werden vector-effect='non-scaling-stroke'(wie im zweiten Feld), aber die Browserunterstützung für diese Eigenschaft ist im IE gleich Null.

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

Methode 2: Verwenden von Verläufen

Wir können mehrere linear-gradientHintergrundbilder verwenden und sie entsprechend positionieren, um einen gestrichelten Randeffekt zu erzielen. Dies kann auch mit a erfolgen repeating-linear-gradient, es gibt jedoch keine große Verbesserung, da ein sich wiederholender Gradient verwendet wird, da jeder Gradient nur in eine Richtung wiederholt werden muss.

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

Vorteile:

1. Skalierbar und kann angepasst werden, auch wenn die Abmessungen des Containers dynamisch sind.
2. Verwendet keine zusätzlichen Pseudoelemente, was bedeutet, dass sie für jede andere mögliche Verwendung beiseite gelegt werden können.

Nachteile:

1. Browserunterstützung für lineare Verläufe ist vergleichsweise geringer und dies ist ein No-Go, wenn Sie IE 9- unterstützen möchten. Selbst Bibliotheken wie CSS3 PIE unterstützen die Erstellung von Verlaufsmustern in IE8- nicht.
2. Kann nicht verwendet werden, wenn border-radiuses beteiligt ist, da die Hintergründe nicht basierend auf gekrümmt sind border-radius. Sie werden stattdessen abgeschnitten.

Methode 3: Box Shadows

Wir können einen kleinen Balken (in Form des Strichs) mit Pseudoelementen erstellen und dann mehrere erstellen box-shadow Versionen davon erstellen, um einen Rahmen wie im folgenden Snippet zu erstellen.

Wenn der Strich eine quadratische Form hat, würde ein einzelnes Pseudoelement ausreichen, aber wenn es ein Rechteck ist, würden wir ein Pseudoelement für die oberen + unteren Ränder und ein anderes für die linken + rechten Ränder benötigen. Dies liegt daran, dass sich Höhe und Breite des Strichs am oberen Rand von denen auf der linken Seite unterscheiden.

Vorteile:

1. Die Abmessungen des Strichs können durch Ändern der Abmessungen des Pseudoelements gesteuert werden. Der Abstand kann durch Ändern des Abstands zwischen den einzelnen Schatten gesteuert werden.
2. Ein sehr einzigartiger Effekt kann erzielt werden, indem für jeden Kastenschatten eine andere Farbe hinzugefügt wird.

Nachteile:

1. Da wir die Abmessungen des Strichs und den Abstand manuell einstellen müssen, ist dieser Ansatz nicht gut, wenn die Abmessungen des übergeordneten Felds dynamisch sind.
2. IE8 und niedriger unterstützen keinen Box Shadow . Dies kann jedoch durch die Verwendung von Bibliotheken wie CSS3 PIE überwunden werden.
3. Kann verwendet werden, border-radiusaber das Positionieren wäre sehr schwierig, wenn Punkte auf einem Kreis (und möglicherweise sogar transform) gefunden werden müssten .

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

Kurz: Nein, das ist es nicht. Sie müssen stattdessen mit Bildern arbeiten.

Es gibt ein cooles Tool von @kovart namens Dashed Border Generator .

Es verwendet ein SVG als Hintergrundbild, um das gewünschte Strichstrich-Array einzustellen, und ist sehr praktisch.

Sie würden es dann einfach als Hintergrundeigenschaft für Ihr Element anstelle des Rahmens verwenden:

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;
}

Die Hublänge hängt von der Hubbreite ab. Sie können die Länge erhöhen, indem Sie die Breite erhöhen und einen Teil des Rahmens durch das innere Element ausblenden.

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

Ich hatte erst kürzlich das gleiche Problem.

Ich habe es geschafft, es mit zwei absolut positionierten Divs zu lösen, die den Rand tragen (einer für horizontal und einer für vertikal) und sie dann zu transformieren. Die äußere Box muss nur relativ positioniert sein.

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

Hinweis: In diesem Beispiel habe ich Tachyonen verwendet, aber ich denke, die Klassen sind selbsterklärend.

Dadurch wird ein orange-grauer Rand mit der Klasse = "myclass" auf dem div erstellt.

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