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

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 background-size und die Proportionen mit dem linearen Farbverlauf in Prozent einstellen. In diesem Beispiel habe ich eine gepunktete Linie aus 1px Punkten und 2px Abstand. Auf diese Weise können Sie mehrere gepunktete Grenzen auch mit mehreren Hintergründen haben.

Probieren Sie es in diesem JSFiddle oder werfen Sie einen Blick auf das Beispiel mit dem Codeschnipsel:

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>

Answer 2

Hier ist ein Trick, den ich bei einem aktuellen Projekt angewandt habe, um mit horizontalen Rändern fast alles zu erreichen, was ich will. Ich verwende <hr/> jedes Mal, wenn ich einen horizontalen Rand benötige. Die grundlegende Methode zum Hinzufügen eines Rahmens zu diesem hr ist etwa so

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

Wenn Sie jedoch die Kontrolle über den Rand übernehmen und z. B. den Abstand zwischen den Punkten vergrößern möchten, können Sie etwas wie folgt versuchen:

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

Und 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*/
}

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

Nun, bei horizontalen Rändern funktioniert es wirklich gut. Wenn Sie vertikale Ränder benötigen, können Sie eine Klasse für einen anderen hr angeben und die CSS3 rotation Eigentum.

Answer 3

Mit reinem CSS geht das nicht - die CSS3-Spezifikation hat sogar ein spezielles Zitat dazu:

Hinweis: Es gibt keine Kontrolle über die Abstände der Punkte und Striche oder die Länge der Striche. Den Implementierungen wird empfohlen, einen Abstand zu wählen, der die Ecken symmetrisch macht.

Sie können jedoch entweder ein Grenzbild oder ein Hintergrundbild, das diesen Zweck erfüllt.

Answer 4

Dabei wird der Standard-CSS-Rahmen und ein Pseudoelement+overflow:hidden verwendet. Im Beispiel erhalten Sie drei verschiedene 2px gestrichelte Ränder: normal, mit einem Abstand von 5px und mit einem Abstand von 10px. 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>

Die Anwendung auf kleine Elemente mit großen abgerundeten Ecken kann für einige lustige Effekte sorgen.

Answer 5

Ich bin spät dran, aber ich habe dieses nette kleine Tool online gefunden.

https://kovart.github.io/dashed-border-generator/