it-swarm.com.de

So vergrößern Sie den Abstand zwischen gepunkteten Randpunkten

Ich benutze in meiner Box gerne einen gepunkteten Rahmen

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

Ich möchte den Abstand zwischen jedem Punkt der Grenze erhöhen.

240

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 den Anteil mit den Prozentsätzen des linearen Verlaufs anpassen. In diesem Beispiel habe ich eine gepunktete Linie von 1px Punkten und 2px Abstand ..__ Auf diese Weise können Sie auch mehrere gepunktete Rahmen mit mehreren Hintergründen haben.

Versuchen Sie es in diesem JSFiddle oder werfen Sie einen Blick auf das Code-Snippet-Beispiel:

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>

356
Eagorajose

Hier ist ein Trick, den ich kürzlich bei einem Projekt verwendet habe, um mit horizontalen Grenzen 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 Rand hinzuzufügen, ist so etwas

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

Wenn Sie jedoch die Kontrolle über den Rand übernehmen möchten und beispielsweise den Abstand zwischen Punkten erhöhen möchten, können Sie Folgendes versuchen:

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

Und im Folgenden erstellen Sie Ihre Umrandung (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 möchten ...

Nun, es funktioniert sehr gut für horizontale Rahmen. Wenn Sie vertikale Klassen benötigen, können Sie eine Klasse für eine andere Stunde angeben und die CSS3-Eigenschaft rotation verwenden.

136
Matt

Mit reinem CSS ist dies nicht möglich - die CSS3-Spezifikation hat sogar ein bestimmtes Zitat dazu:

Hinweis: Es gibt keine Kontrolle über den Abstand der Punkte und Striche sowie über die Länge der Striche. Implementierungen werden empfohlen, 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.

116
Shadikka

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.
  • hidden: Wie 'none', außer im Hinblick 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 Rahmenbreite definierten Pixelmenge addieren.
  • groove: Geschnitzter Effekt.
  • einfügung: Lässt die Box eingebettet erscheinen.
  • anfang: Gegenteil von "Einschub". Lässt die Box in 3D (geprägt) erscheinen.
  • kamm: Gegenüber 'Rille'. Der Rand erscheint in 3D (herauskommend).
  • durchgehend: Einzelne gerade durchgehende Linie.

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

Wenn die Möglichkeiten nicht Ihren Vorstellungen entsprechen, können Sie CSS3s border-image verwenden. Beachten Sie jedoch, dass die Browser-Unterstützung dafür immer noch sehr lückenhaft ist.

17
Pekka 웃

Hierbei werden der Standard-CSS-Rahmen und ein Pseudo-Element + Überlauf verwendet: hidden . Im Beispiel werden drei verschiedene 2px-gestrichelte Rahmen angezeigt: Normal, im Abstand von 5 Pixeln, im Abstand von 10 Pixeln. 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 einigen lustigen Effekten führen.

16
lenioia

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

In meinem Fall wollte ich einen dicken, gestrichelten Rand, der zwischen den Strichen einen minimalen Bruch hatte. Ich habe einen CSS-Mustergenerator (wie diesen: http://www.patternify.com/ ) verwendet, um ein 10px breites und 1px großes Muster zu erstellen. 9px davon ist durchgehende Strichfarbe, 1px ist weiß.

In meinem CSS habe ich dieses Muster als Hintergrundbild eingefügt und es dann mit dem Attribut background-size vergrößert. Ich endete mit einem 20px mal 2px wiederholten Strich, davon waren 18px eine durchgehende Linie und 2px Weiß. Für eine wirklich dicke gestrichelte Linie können Sie es noch stärker skalieren.

Das Schöne daran ist, dass das Bild als Daten verschlüsselt ist, da die zusätzliche externe HTTP-Anforderung nicht vorliegt, sodass keine Leistungsbelastung entsteht. Ich habe mein Bild als SASS-Variable gespeichert, damit ich es auf meiner Website wiederverwenden kann.

6
Nick Angiolillo

Beginnen Sie also mit der 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, an jeder Randseite unterschiedlich lange Striche zu verwenden.

5
Ukuser32

So viele Leute sagen "Sie können nicht". Ja, du kannst. Es ist wahr, dass es keine CSS-Regel gibt, um den Zwischenraum zwischen den Strichen zu steuern, aber CSS hat andere Fähigkeiten. Sei nicht so schnell zu sagen, 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 5 Pixel) die Regel, die die Breite der Dachrinne bestimmt. OWenn Sie die Farben natürlich an Ihre Bedürfnisse anpassen müssen. Dies ist auch ein kleines Beispiel für eine horizontale Linie. Verwenden Sie links und rechts, um die vertikale Linie zu erstellen.

2
devinfd

Kurze Antwort: Das geht nicht.

Sie müssen border-image property und einige Bilder verwenden.

2
Crozin

WENN Sie nur auf moderne Browser abzielen UND Sie können den Rand auf einem separaten Element Ihres Inhalts festlegen, dann 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 erfordert viel Positionsoptimierung, um es aufzustellen, aber es funktioniert. Durch Ändern der Randstärke, der Startgröße und des Skalierungsfaktors können Sie das gewünschte Verhältnis von Dicke zu Länge genau erreichen. Das einzige, was Sie nicht berühren können, ist das Verhältnis von Strich zu Abstand.

2
Dave

Dies ist ein altes, aber dennoch sehr relevantes Thema. Die aktuelle Top-Antwort funktioniert gut, aber nur für sehr kleine Punkte. Wie Bhojendra Rauniyar bereits in den Kommentaren darauf hingewiesen hat, erscheinen die Punkte für größere (> 2px) Punkte quadratisch und nicht rund. Ich habe diese Seite auf der Suche nach Dots im Abstand, nicht mit Quadraten (oder sogar Bindestrichen, wie einige Antworten hier verwenden) gesucht.

Darauf aufbauend verwendete ich radial-gradient. Wenn Sie die Antwort von Ukuser32 verwenden, können die Punkteigenschaften für alle vier Ränder problemlos 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>

Der radial-gradienterwartet :

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

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

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

1
Marten Koetsier

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

0
velop

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

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>

Ich habe eine Javascript-Funktion gemacht, 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>
0
dmodo

AFAIK gibt es dafür keine Möglichkeit. Sie können einen gestrichelten Rahmen verwenden oder die Breite des Rahmens vielleicht ein wenig vergrößern, aber es ist mit CSS nicht möglich, mehr Punkte zu erhalten.

0
Bojangles
<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 ist, was ich getan habe - ein Bild verwenden Bildbeschreibung hier eingeben

0