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

In meinem Fall brauchte ich abgerundete Ecken und einen dünnen Rand, also habe ich diese Lösung gefunden:

/* For showing dependencies between attributes */
 :root {
  --border-width: 1px;
  --border-radius: 4px;
  --bg-color: #fff;
}

/* Required: */
.dropzone {
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius);
  background-clip: padding-box;
  background-color: var(--bg-color);
}
.dropzone::before {
  content: '';
  position: absolute;
  top: calc(var(--border-width) * -1); /* or without variables: 'top: -1px;' */
  right: calc(var(--border-width) * -1);
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  z-index: -1;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-color) 8px 16px);
  border-radius: var(--border-radius);
  background-color: rgba(0, 0, 0, 0.38);
}

/* Optional: */
html {
  background-color: #fafafb;
  display: flex;
  justify-content: center;
}
.dropzone {
  box-sizing: border-box;
  height: 168px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dropzone::before {
  transition: background-color 0.2s ease-in-out;
}
.dropzone:hover::before {
  background-color: rgba(0, 0, 0, 0.87);
}

<div class='dropzone'>
  Drag 'n' drop some files here, or click to select files
</div>

Die Idee ist, ein svg-Muster hinter einem Element zu platzieren und nur eine dünne Linie dieses Musters als Elementrand anzuzeigen.

Answer 2

So viele Leute sagen: "Das geht nicht". Doch, man kann. Es stimmt zwar, dass es keine CSS-Regel gibt, um den Zwischenraum zwischen den Bindestrichen zu steuern, aber CSS hat andere Möglichkeiten. Seien Sie nicht so schnell zu sagen, dass eine Sache 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 Höhe des oberen Randes (in diesem Fall 5 px) die Regel, die die "Breite" der Gosse bestimmt. Natürlich müssen 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 machen.

Answer 3

WENN Sie nur auf moderne Browser abzielen UND Ihren Rahmen auf einem vom Inhalt getrennten Element haben können, dann können Sie die CSS-Skalierungstransformation 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 eine Menge Positionskorrekturen, aber es funktioniert. Durch Ändern der Dicke des Rahmens, der Ausgangsgröße und des Skalierungsfaktors können Sie das gewünschte Verhältnis zwischen Dicke und Länge erreichen. Das einzige, was man nicht ändern kann, ist das Verhältnis von Strich zu Lücke.

Answer 4

Kurze Antwort: Sie können es nicht.

Sie müssen Folgendes verwenden border-image und ein paar Bilder.

Answer 5

<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>

So habe ich es gemacht - ein Bild verwenden Bildbeschreibung hier eingeben