Ich verwende einen gepunkteten Rahmen in meiner Box wie
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
Ich möchte den Abstand zwischen den einzelnen Punkten des Rahmens vergrößern.
Siehe die MDN docs für die verfügbaren Werte für border-style
:
- none : Kein Rahmen, setzt die Breite auf 0. Dies ist der Standardwert.
- hidden : Dasselbe wie 'none', außer in Bezug auf die Randkonfliktauflösung für Tabellen Elemente.
- gestrichelt : Reihe von kurzen Strichen oder Liniensegmenten.
- gepunktet : Eine Reihe von Punkten.
- doppelt : Zwei gerade Linien, die sich zur Pixelanzahl addieren definiert als Randbreite.
- Rille : Geschnitzter Effekt.
- eingebettet : Lässt den Rahmen eingebettet erscheinen.
- outset : Gegenteil von 'eingebettet'. Lässt die Schachtel 3D erscheinen (erhaben).
- Steg : Gegenteil von 'Rille'. Der Rand erscheint 3D (hervorstehend).
- solid : Einzelne, gerade, durchgezogene Linie.
Abgesehen von diesen Auswahlmöglichkeiten gibt es keine Möglichkeit, den Stil des Standardrahmens zu beeinflussen.
Wenn Ihnen die dortigen Möglichkeiten nicht zusagen, können Sie CSS3's border-image
verwenden, aber beachten Sie, dass die Browserunterstützung dafür noch sehr lückenhaft ist.
Kurze Antwort: Sie können es nicht.
Sie müssen die Eigenschaft border-image
und ein paar Bilder verwenden.