So vergrößern Sie den Abstand zwischen den gepunkteten Rahmenpunkten

Question

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.

Answer 1

Ausgehend von der gegebenen Antwort und der Tatsache, dass CSS3 mehrere Einstellungen zulässt, ist der folgende Code nützlich, um eine vollständige Box zu erstellen:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

<div id="border">
  bordered area
</div>

Es ist erwähnenswert, dass die 10px in der Hintergrundgröße den Bereich angibt, den der Strich und die Lücke abdecken werden. Die 50% der Hintergrund-Tag ist, wie breit der Strich tatsächlich ist. Es ist daher möglich, unterschiedliche Länge Striche auf jeder Grenze Seite haben.

Answer 2

Siehe die MDN-Dokumente für die verfügbaren Werte für border-style :

• none : Kein Rahmen, setzt die Breite auf 0. Dies ist der Standardwert.

• hidden : Gleich wie 'none', außer in Bezug auf Randkonfliktauflösung für Tabellen Elemente.
• gestrichelt : Reihe von kurzen Strichen oder Liniensegmenten.
• gepunktet : Reihe von Punkten.
• double : Zwei gerade Linien, die sich zum Pixelwert addieren definiert als Randbreite.
• Rille: Geschnitzter Effekt.
• inset : Macht die Box eingebettet erscheinen.
• Anfang : Gegenteil von einfügen'. Lässt den Kasten in 3D erscheinen (erhaben).
• Kamm : Gegenüber von Rille'. Der Rand erscheint 3D (hervorstehend).
• solide : Single, gerade, durchgezogene Linie.

Abgesehen von diesen Optionen gibt es keine Möglichkeit, den Stil des Standardrahmens zu beeinflussen.

Wenn Ihnen die dortigen Möglichkeiten nicht zusagen, können Sie könnte verwenden die CSS3 border-image aber beachten Sie, dass die Browserunterstützung dafür noch sehr lückenhaft ist ( EDITAR : Browserunterstützung ist ab 2020 gültig).

Answer 3

Dies ist ein altes, aber immer noch sehr aktuelles Thema. Die aktuelle Top-Antwort funktioniert gut, allerdings nur bei sehr kleinen Punkten. Wie Bhojendra Rauniyar bereits in den Kommentaren anmerkte, erscheinen die Punkte bei größeren (>2px) quadratisch, nicht rund. Ich fand diese Seite bei der Suche nach spaced Punkte , nicht beabstandet Quadrate (oder sogar Bindestriche, wie in einigen Antworten hier verwendet).

Darauf aufbauend habe ich radial-gradient . Auch die Verwendung von die Antwort von Ukuser32 können die Punkt-Eigenschaften für alle vier Ränder leicht wiederholt werden. Nur die Ecken sind nicht perfekt.

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}

<div>Some content with round, spaced dots as border</div>

En radial-gradient erwartet :

• die Form und optional Position
• zwei oder mehr Haltestellen: eine Farbe und ein Radius

Hier wollte ich einen Punkt mit einem Durchmesser von 5 Pixeln (2,5 px Radius), mit dem zweifachen Durchmesser (10 px) zwischen den Punkten, was insgesamt 15 px ergibt. Die background-size sollten mit diesen übereinstimmen.

Die beiden Stopps sind so definiert, dass der Punkt schön glatt ist: einfarbig schwarz für die Hälfte des Radius und dann ein Farbverlauf für den vollen Radius.

Answer 4

Aufbau einer 4-Kanten-Lösung auf der Grundlage der Antwort von @Eagorajose mit Shorthand-Syntax:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

    width: 100px;
    height: 100px;
}

<div id="page"></div>

Answer 5

Dies ist eine wirklich alte Frage, aber sie hat einen hohen Rang in Google, also werde ich meine Methode einbringen, die je nach Ihren Bedürfnissen funktionieren könnte.

In meinem Fall wollte ich einen dicken gestrichelten Rand mit einer minimalen Unterbrechung zwischen den Strichen. Ich habe einen CSS-Mustergenerator verwendet (wie diesen hier: http://www.patternify.com/ ), um ein 10px breites und 1px hohes Muster zu erstellen. 9px davon ist solide Dash Farbe, 1px ist weiß.

In meinem CSS habe ich dieses Muster als Hintergrundbild eingefügt und es dann mit dem Attribut background-size hochskaliert. Ich endete mit einem 20px von 2px wiederholten Strich, 18px, dass die solide Linie und 2px weiß. Sie könnten es skalieren noch mehr für eine wirklich dicke gestrichelte Linie.

Das Schöne daran ist, dass das Bild als Daten kodiert ist und man keine zusätzliche HTTP-Anfrage von außen stellen muss, so dass es keine Leistungseinbußen gibt. Ich habe mein Bild als SASS-Variable gespeichert, damit ich es auf meiner Website wiederverwenden kann.