Der native Eigenschaftswert mit gestrichelten Rändern bietet keine Kontrolle über die Bindestriche selbst ... also bringen Sie die border-image
Eigenschaft 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
Definieren Sie die border-image-Quelle :
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
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-width
Satz.
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:
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 #000
Fallback. 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>
border-style: solid
(oder etwas Ähnliches), wenn Sie den Fallback weglassen.Zusätzlich zur
border-image
Eigenschaft 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
path
oder einpolygon
Element verwenden und diestroke-dasharray
Eigenschaft festlegen. Die Eigenschaft verwendet zwei Parameter, wobei einer die Größe des Strichs definiert und der andere den Abstand zwischen ihnen bestimmt.Vorteile:
border-radius
. Wir hätten nur die ersetzen müssenpath
circle
in dieser Antwort ein Like (oder daspath
in einen Kreis umwandeln) .Nachteile:
vector-effect='non-scaling-stroke'
(wie im zweiten Feld), aber die Browserunterstützung für diese Eigenschaft ist im IE gleich Null.Code-Snippet anzeigen
Methode 2: Verwenden von Verläufen
Wir können mehrere
linear-gradient
Hintergrundbilder verwenden und sie entsprechend positionieren, um einen gestrichelten Randeffekt zu erzielen. Dies kann auch mit a erfolgenrepeating-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.Code-Snippet anzeigen
Vorteile:
Nachteile:
border-radius
es beteiligt ist, da die Hintergründe nicht basierend auf gekrümmt sindborder-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:
Nachteile:
border-radius
aber das Positionieren wäre sehr schwierig, wenn Punkte auf einem Kreis (und möglicherweise sogartransform
) gefunden werden müssten .Code-Snippet anzeigen
quelle
pointer-events:none
möchten, empfehle ich, sie zu SVG hinzuzufügen, um mit dem Inhalt interagieren zu können.Kurz: Nein, das ist es nicht. Sie müssen stattdessen mit Bildern arbeiten.
quelle
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:
quelle
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.
https://jsfiddle.net/ok6srt2z/
quelle
pointer-events: none
, um das Overlay-Problem zu vermeiden.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.
Hinweis: In diesem Beispiel habe ich Tachyonen verwendet, aber ich denke, die Klassen sind selbsterklärend.
quelle
Dadurch wird ein orange-grauer Rand mit der Klasse = "myclass" auf dem div erstellt.
quelle