Kontrollieren Sie die gestrichelte Grenze Hublänge und Abstand zwischen den Strichen

Question

Ist es möglich, die Länge und der Abstand zwischen den gestrichelten Grenze Hübe in CSS zu kontrollieren?

Das folgende Beispiel zeigt unterschiedlich zwischen den Browsern:

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, die eine bessere Kontrolle der gestrichelten Umrandung Aussehen verleihen kann?

Answer 1

Css machen Browser spezifisch ist, und ich kenne keine Feinabstimmung auf sie, sollten Sie mit Bildern arbeiten, wie Ham empfohlen. Referenz: http://www.w3.org/TR/CSS2 /box.html#border-style-properties

Answer 2

Der native gestrichelter Rand Eigenschaftswert bietet keine Kontrolle über die Striche selbst ... so bringt auf dem border-image Eigentum!

Brew Ihre eigene Grenze zu border-image

Kompatibilität : Es bietet große Browser-Unterstützung (IE 11 und alle modernen Browser) . Eine normale Grenze kann als Ausweich für ältere Browser eingestellt werden.

Lassen Sie uns erstellen diese

Diese Grenzen werden angezeigt genau den gleichen Cross-Browser!

Schritt 1 - Erstellen Sie ein geeignetes Bild

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

Dies ist, wie es in Photoshop aussieht, wenn gezoomt:

Dies ist, wie es maßstab aussieht:

Controlling Lücke und Hublänge

So erstellen Sie breitere / kürzere Lücken oder Schlaganfälle, erweitern / die Lücken oder Striche in dem Bild verkürzen.

Hier ist ein Bild mit breiten 10px Lücken:

korrekt skaliert =

Schritt 2 - Erstellen Sie die 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 Grenze -Image-Breite :

   border-image-width: 1;
   

   Der Standardwert ist 1. Es kann auch mit einem Pixelwert, Prozentwert oder als ein anderes mehr (1x, 2x, 3x usw.) eingestellt werden. Dies überschreibt jeder border-width Satz.

3. Definieren Sie die border-image-Scheibe :

   In diesem Beispiel ist die Dicke der oberen Bilder, rechten, unteren und linken Grenzen ist 2px, und es gibt keinen Zwischenraum außerhalb von ihnen, so dass unser slice Wert 2:

   border-image-slice: 2; 
   

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

   

4. Definieren Sie den border-image-repeat :

   In diesem Beispiel wollen wir das Muster selbst zu wiederholen gleichmäßig um unsere div. So wählen wir:

   border-image-repeat: round;
   

Schreiben Stenografie

Die Eigenschaften können über individuell eingestellt werden, oder in Kurzschrift mit border-image :

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

Komplettes Beispiel

Beachten Sie die border: dashed 4px #000 Rückfall. Nicht-unterstützende Browser wird diese Grenze erhalten.

.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

Neben der border-image Eigenschaft, gibt es ein paar andere Möglichkeiten, eine gestrichelte Grenze mit Kontrolle über die Länge des Hubs und den Abstand zwischen ihnen zu schaffen. Sie werden im Folgenden beschrieben:

Methode 1: Verwenden SVG

Wir können die gestrichelte Grenze schaffen, indem ein path oder ein polygon Element verwendet und die Einstellung der stroke-dasharray Eigenschaft. Die Eigenschaft hat zwei Parameter, wo man die Größe des Armaturenbretts definiert und der andere bestimmt den Raum zwischen ihnen.

Vorteile:

1. SVGs von Natur aus sind skalierbare Grafiken und kann auf jede Behälterabmessungen anpassen.
2. Kann arbeiten sehr gut, auch wenn es eine border-radius beteiligt. Wir würden nur die path mit einem circle ersetzen wie in diese Antwort (oder) wandelt die path in einen Kreis.
3. Browser-Unterstützung für SVG ist ziemlich gut und Rückfall kann mit VML für IE8- zur Verfügung gestellt werden .

Nachteile:

1. Wenn die Abmessungen des Behälters nicht proportional ändern, neigen dazu, die Wege zu einer Änderung maßstäblich in der Größe des Armaturenbretts und den Raum zwischen ihnen (versuchen Sie auf dem ersten Feld im Snippet schwebt). Dies kann durch Zugabe vector-effect='non-scaling-stroke' gesteuert werden (wie in der zweiten Box), aber die Browser-Unterstützung für diese Eigenschaft ist null im Internet Explorer.

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

Wir können sie mehrere linear-gradient Hintergrundbilder und Position verwenden in geeigneter Weise eine gestrichelte Grenzeffekt zu erzeugen. Dies kann auch mit einem repeating-linear-gradient getan werden, aber es gibt nicht viel Verbesserung, weil ein sich wiederholendes Gradienten, wie wir jeden Gradienten zu wiederholen brauchen nur in eine Richtung.

.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 Behälterabmessungen dynamisch sind.
2. kein Gebrauch von irgendwelchen zusätzlichen Pseudo-Elementen machen, die Mittel, die sie beiseite für andere mögliche Verwendung gehalten werden können.

Nachteile:

1. Browser-Unterstützung für lineare Verläufe vergleichsweise niedriger ist und das ist ein No-Go, wenn Sie wollen IE 9- unterstützen. Auch Bibliotheken wie CSS3 PIE nicht Schaffung von Gradientenmustern in IE8 unterstützen -.
2. kann nicht verwendet werden, wenn border-radius beteiligt ist, weil Hintergründe Kurve nicht basierend auf border-radius. Sie bekommen abgeschnitten statt.

---

Methode 3: Box Schatten

Wir können eine kleine Bar schaffen (in Form des Armaturenbretts) unter Verwendung von Pseudo-Elementen und dann mehr box-shadow Versionen davon erstellen eine Grenze wie in der unten Snippet zu erstellen.

Wenn der Strich eine quadratische Form ist dann ein einziges Pseudoelement genug sein, um würde, aber wenn es ein Rechteck ist, würden wir ein Pseudoelement für die oberen + unteren Ränder und eine andere für links + rechts Grenzen brauchen. Dies liegt daran, die Höhe und Breite für den Strich an der oberen Grenze werden von dem auf der linken Seite unterschiedlich sein.

Vorteile:

1. Die Abmessungen des Armaturenbretts ist steuerbar, indem die Abmessungen des Pseudo-Elements zu verändern. Der Abstand ist steuerbar durch den Raum zu modifizierenzwischen jedem Schatten.
2. Eine sehr einzigartige Wirkung kann durch Zugabe einer anderen Farbe für jede Box Schatten erzeugt werden.

Nachteile:

1. Da wir die Dimensionen des Armaturenbretts und der Abstandes manuell eingestellt haben, ist dieser Ansatz nicht gut, wenn die Abmessungen der Mutter Box dynamisch ist.
2. IE8 und unterer nicht Unterstützung Box Schatten . Dies kann jedoch durch die Verwendung Bibliotheken wie CSS3 PIE überwunden werden.
3. Kann mit border-radius verwendet werden, aber der Positionierung sie würde sehr schwierig sein, mit mit Punkten auf einem Kreis zu finden (und möglicherweise sogar 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

Kurz ein: Nein, ist es nicht. Sie werden stattdessen mit Bildern zu arbeiten.