So vergrößern Sie den Abstand zwischen gepunkteten Randpunkten

Ich verwende gepunktete Rahmen in meiner Box wie

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

Ich möchte den Abstand zwischen jedem Punkt des Randes vergrößern.

Dieser Trick funktioniert sowohl für horizontale als auch für vertikale Ränder:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

Sie können die Größe mit der Hintergrundgröße und das Verhältnis mit den Prozentsätzen des linearen Verlaufs anpassen. In diesem Beispiel habe ich eine gepunktete Linie mit 1 Pixel Punkten und 2 Pixel Abstand. Auf diese Weise können Sie auch mehrere gepunktete Ränder mit mehreren Hintergründen verwenden.

Probieren Sie es in dieser JSFiddle aus oder sehen Sie sich das Code-Snippet-Beispiel an:

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}

<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

Hier ist ein Trick, den ich kürzlich bei einem Projekt verwendet habe, um mit horizontalen Rändern fast alles zu erreichen, was ich will. Ich benutze <hr/>jedes Mal, wenn ich einen horizontalen Rand brauche. Die grundlegende Möglichkeit, dieser Stunde einen Rahmen hinzuzufügen, ist ungefähr so

 hr {border-bottom: 1px dotted #000;}

Wenn Sie jedoch die Kontrolle über die Grenze übernehmen und beispielsweise den Abstand zwischen den Punkten vergrößern möchten, können Sie Folgendes versuchen:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

Im Folgenden erstellen Sie Ihren Rahmen (hier ein Beispiel mit Punkten).

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

Dies bedeutet auch, dass Sie den Punkten, Verläufen usw. Textschatten hinzufügen können. Alles, was Sie wollen ...

Nun, es funktioniert wirklich gut für horizontale Ränder. Wenn Sie vertikale benötigen, können Sie eine Klasse für eine weitere Stunde angeben und die CSS3- rotationEigenschaft verwenden.

Mit reinem CSS ist dies nicht möglich - die CSS3-Spezifikation enthält sogar ein spezielles Zitat dazu:

Hinweis: Es gibt keine Kontrolle über den Abstand der Punkte und Striche oder über die Länge der Striche. Implementierungen werden aufgefordert, einen Abstand zu wählen, der die Ecken symmetrisch macht.

Sie können jedoch entweder ein Rahmenbild oder ein Hintergrundbild verwenden, das den Trick ausführt.

Dies verwendet den Standard-CSS-Rand und ein Pseudoelement + Überlauf: versteckt. Im Beispiel erhalten Sie drei verschiedene gestrichelte 2-Pixel-Ränder: Normal, Abstand wie 5-Pixel, Abstand wie 10-Pixel. Ist eigentlich 10px mit nur 10-8 = 2px sichtbar.

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

Auf kleine Elemente mit großen abgerundeten Ecken angewendet, kann dies zu lustigen Effekten führen.

Beginnen Sie also mit der gegebenen Antwort und wenden Sie die Tatsache an, dass CSS3 mehrere Einstellungen zulässt. Der folgende Code ist 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. Die 50% des Hintergrund-Tags geben an, wie breit der Strich tatsächlich ist. Es ist daher möglich, auf jeder Randseite Striche unterschiedlicher Länge zu haben.

In den MDN-Dokumenten finden Sie die verfügbaren Werte für border-style:

• none: Kein Rand, setzt die Breite auf 0. Dies ist der Standardwert.
• versteckt: Wie 'keine', außer in Bezug auf die Lösung von Grenzkonflikten für Tabellenelemente.
• gestrichelt: Reihe von kurzen Strichen oder Liniensegmenten.
• gepunktet: Reihe von Punkten.
• double: Zwei gerade Linien, die sich zu der als Randbreite definierten Pixelmenge addieren.
• Groove: Geschnitzter Effekt.
• Einschub: Lässt das Feld eingebettet erscheinen.
• Anfang: Gegenüber von 'Einschub'. Lässt das Feld 3D (geprägt) erscheinen.
• Grat: Gegenüber von 'Groove'. Der Rand erscheint 3D (kommt heraus).
• durchgezogen: Einfache, gerade, durchgezogene Linie.

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

Wenn die Möglichkeiten dort nicht nach Ihrem Geschmack sind, Sie könnten CSS3 des verwenden , border-imageaber beachten Sie, dass Browser - Unterstützung für diese nach wie vor sehr fleckig.

Erstellen einer 4-Kanten-Lösung basierend auf der Antwort von @ Eagorajose mit Kurzsyntax:

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>

Dies ist ein altes, aber immer noch sehr relevantes Thema. Die aktuelle Top-Antwort funktioniert gut, aber nur für sehr kleine Punkte. Wie Bhojendra Rauniyar bereits in den Kommentaren hervorhob, erscheinen die Punkte bei größeren (> 2 Pixel) Punkten quadratisch und nicht rund. Ich fand diese Seite auf der Suche nach beabstandeten Punkten , nicht nach beabstandeten Quadraten (oder sogar Strichen, wie einige Antworten hier verwenden).

Darauf aufbauend habe ich verwendet radial-gradient. Mit der Antwort von Ukuser32 können die Punkteigenschaften auch problemlos für alle vier Ränder 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>

Das radial-gradient erwartet :

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

Hier wollte ich einen Punkt mit 5 Pixeldurchmesser (2,5 Pixel Radius) mit dem doppelten Durchmesser (10 Pixel) zwischen den Punkten, der sich zu 15 Pixel addiert. Das background-sizesollte diesen entsprechen.

Die beiden Anschläge sind so definiert, dass der Punkt schön glatt ist: festes Schwarz für den halben Radius und dann ein Gefälle zum vollen Radius.

Dies ist eine wirklich alte Frage, aber sie hat einen hohen Stellenwert bei Google, daher werde ich meine Methode einsetzen, die je nach Ihren Anforderungen funktionieren könnte.

In meinem Fall wollte ich einen dicken gestrichelten Rand, der zwischen den Strichen nur eine minimale Unterbrechung aufweist. Ich habe einen CSS-Mustergenerator verwendet (wie diesen: http://www.patternify.com/ ) verwendet, um ein Muster mit einer Breite von 10 x 1 Pixel zu erstellen. 9px davon sind einfarbig, 1px ist weiß.

In mein CSS habe ich dieses Muster als Hintergrundbild aufgenommen und es dann mithilfe des Attributs "Hintergrundgröße" vergrößert. Am Ende hatte ich einen wiederholten Strich von 20 x 2 Pixel, davon 18 Pixel durchgezogene Linie und 2 Pixel Weiß. Sie könnten es für eine wirklich dicke gestrichelte Linie noch weiter vergrößern.

Das Schöne ist, da das Bild als Daten codiert ist, haben Sie keine zusätzliche externe HTTP-Anforderung, sodass keine Leistungsbelastung entsteht. Ich habe mein Bild als SASS-Variable gespeichert, damit ich es auf meiner Site wiederverwenden kann.

Kurze Antwort: Das kannst du nicht.

Sie müssen border-imageEigenschaft und einige Bilder verwenden.

So viele Leute sagen "Du kannst nicht". Ja, du kannst. Es ist wahr, dass es keine CSS-Regel gibt, um den Rinnenraum zwischen den Strichen zu kontrollieren, aber CSS hat andere Fähigkeiten. Sagen Sie nicht so schnell, dass etwas nicht getan werden kann.

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

Grundsätzlich ist die Randhöhe (in diesem Fall 5px) die Regel, die die "Breite" der Rinne bestimmt. Natürlich müssten Sie die Farben an Ihre Bedürfnisse anpassen. Dies ist auch ein kleines Beispiel für eine horizontale Linie. Verwenden Sie links und rechts, um die vertikale Linie zu erstellen.

Ich habe eine Javascript-Funktion erstellt, um Punkte mit einem SVG zu erstellen. Sie können den Punktabstand und die Größe im Javascript-Code anpassen.

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();

div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}

<div class="dotted">Lorem Ipsum</div>

Wenn Sie nur auf moderne Browser abzielen UND Ihren Rand auf ein von Ihrem Inhalt getrenntes Element setzen können, können Sie die CSS-Skalentransformation verwenden, um einen größeren Punkt oder Strich zu erhalten:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

Es sind viele Positionsänderungen erforderlich, um die Ausrichtung zu gewährleisten, aber es funktioniert. Durch Ändern der Randdicke, der Startgröße und des Skalierungsfaktors können Sie das gewünschte Verhältnis von Dicke zu Länge erreichen. Das einzige, was Sie nicht berühren können, ist das Verhältnis von Strich zu Lücke.

<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

Das habe ich getan - benutze ein Bild , gib hier eine Bildbeschreibung ein

AFAIK gibt es keine Möglichkeit, dies zu tun. Sie könnten einen gestrichelten Rand verwenden oder die Breite des Randes etwas vergrößern, aber mit CSS ist es unmöglich, nur weiter auseinander liegende Punkte zu erhalten.

Sie können eine Leinwand erstellen (über Javascript) und eine gepunktete Linie darin zeichnen. Innerhalb der Leinwand können Sie steuern, wie lang der Bindestrich und der Abstand dazwischen sein sollen.