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

Ich habe eine Javascript-Funktion zum Erstellen von Punkten mit einem svg. 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>

Answer 2

Hier ist eine Lösung, bei der nur CSS verwendet wird, um den überschüssigen Rand mit einem Clip-Pfad zu maskieren. Im Gegensatz zu der am häufigsten gewählten Antwort können hier auch transparente Hintergründe verwendet werden. Sie können auch abgerundete Ränder verwenden, indem Sie die Eigenschaft clip-path round mit dem border-radius abgleichen.

.demo {
  display: inline-flex;
  width: 200px;
  height: 100px;
  position: relative;
  clip-path: inset(0 round 30px 0 30px 0);
}

.demo::before {
  content: '';
  position: absolute;
  left: -7px;
  top: -7px;
  right: -7px;
  bottom: -7px;
  border: 8px dashed rgba(0, 0, 255, 0.3);
  border-radius: 37px 0 37px 0;
  box-sizing: border-box;
}

<div class="demo"></div>

Hier ist ein Sass-Mixin für alle Interessierten

=dashed-border($size: 5px, $thickness: 1px, $color: black, $round: 0px)

    $corners: ''

    @for $i from 1 through length($round)
        $value: nth($round, $i)
        @if $value != 0
            $corners: unquote($corners + calc(#{$value} - #{$size}) + ' ')
        @else
            $corners: unquote($corners + #{$value} + ' ')

    clip-path: inset(0 round $corners)

    &::before
        content: ''
        position: absolute
        left: - $size + $thickness
        top: - $size + $thickness
        right: - $size + $thickness
        bottom: - $size + $thickness
        border: $size dashed $color
        border-radius: $round
        box-sizing: border-box

Answer 3

Wir brauchten Kreise und so haben wir es gelöst :)

Dies geschieht mehr oder weniger mit dem Element, für das der gestaltete "Rahmen" benötigt wird:

:before {
      position: absolute;
      width: 100%;
      height: 10px;
      top:0;
      left: 0;
      transform: translateY(-50%);
      content: '';
      background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
    }

Demo: https://codepen.io/arnoldsv/pen/PoWYxbg

Answer 4

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

Answer 5

AFAIK gibt es keine Möglichkeit, dies zu tun. Sie könnten einen gestrichelten Rahmen verwenden oder vielleicht die Breite des Rahmens etwas erhöhen, aber einfach nur mehr Punkte zu setzen, ist mit CSS unmöglich.