Jak zwiększyć odstęp między kropkowanymi punktami obramowania

Używam kropkowanej ramki stylu w moim pudełku jak

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

Chcę zwiększyć odstęp między każdą kropką granicy.

Ta sztuczka działa zarówno dla granic poziomych, jak i pionowych:

/*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;

Możesz dostosować rozmiar za pomocą rozmiaru tła i proporcji za pomocą procentów gradientu liniowego. W tym przykładzie mam przerywaną linię 1px kropek i odstępy 2px. W ten sposób możesz również mieć wiele kropkowanych ramek, używając wielu tła.

Wypróbuj w tym JSFiddle lub spójrz na przykład fragmentu kodu:

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>

Oto sztuczka, którą zastosowałem w ostatnim projekcie, aby osiągnąć prawie wszystko, co chcę z poziomymi granicami. Używam za <hr/>każdym razem, gdy potrzebuję poziomej ramki. Podstawowym sposobem dodania granicy do tej godziny jest coś w rodzaju

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

Ale jeśli chcesz przejąć kontrolę nad ramką i, na przykład, zwiększyć odstęp między kropkami, możesz spróbować czegoś takiego:

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

W dalszej części utworzysz granicę (oto przykład z kropkami)

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

Oznacza to również, że możesz dodać cień tekstowy do kropek, gradientów itp. Cokolwiek chcesz ...

Cóż, działa naprawdę świetnie dla poziomych granic. Jeśli potrzebujesz tych pionowych, możesz określić klasę dla innej godziny i użyć rotationwłaściwości CSS3 .

Nie można tego zrobić za pomocą czystego CSS - specyfikacja CSS3 ma nawet konkretny cytat na ten temat:

Uwaga: Nie ma kontroli nad odstępem kropek i kresek ani nad długością kresek. Implementacje są zachęcane do wybierania odstępów, które sprawiają, że rogi są symetryczne.

Możesz jednak użyć obrazu obramowania lub obrazu tła, który załatwi sprawę.

Wykorzystuje standardową ramkę CSS i pseudoelement + przepełnienie: ukryte. W tym przykładzie otrzymujesz trzy różne przerywane ramki 2px: normalne, rozmieszczone jak 5px, rozmieszczone jak 10px. Jest w rzeczywistości 10 pikseli z widocznymi tylko 10-8 = 2 piksele.

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>

Zastosowanie do małych elementów z dużymi zaokrąglonymi narożnikami może zapewnić zabawne efekty.

Więc zaczynając od udzielonej odpowiedzi i stosując fakt, że CSS3 pozwala na wiele ustawień - poniższy kod jest przydatny do utworzenia kompletnego pudełka:

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

Warto zauważyć, że 10 pikseli w tle daje obszar, który obejmie kreska i przerwa. 50% znacznika tła określa, jak szeroka jest kreska. Dlatego możliwe jest posiadanie różnej długości myślników po każdej stronie granicy.

Zobacz dokumentację MDN dla dostępnych wartości dla border-style:

• none: Bez obramowania, ustawia szerokość na 0. Jest to wartość domyślna.
• ukryty: taki sam jak „brak”, z wyjątkiem kwestii rozwiązywania konfliktów granicznych dla elementów tabeli.
• kreskowane: seria krótkich myślników lub odcinków linii.
• kropkowany: seria kropek.
• double: Dwie proste linie, które sumują się do liczby pikseli zdefiniowanej jako szerokość ramki.
• rowek: efekt rzeźbiony.
• wstawka: sprawia, że ​​pole wydaje się osadzone.
• początek: Naprzeciwko „wstawki”. Sprawia, że ​​pole wygląda 3D (wytłoczone).
• Grzbiet: Naprzeciwko „rowka”. Ramka pojawia się w 3D (wychodzi).
• jednolity: Pojedyncza, prosta, ciągła linia.

Oprócz tych wyborów nie ma żadnego wpływu na styl standardowej granicy.

Jeżeli nie ma możliwości do własnych upodobań, to mógłby użyć CSS3 użytkownika border-imagenależy jednak pamiętać, że wsparcie dla przeglądarki to nadal bardzo zawodny.

Budowanie rozwiązania 4-krawędziowego w oparciu o odpowiedź @ Eagorajose ze skróconą składnią:

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>

To stary, ale wciąż bardzo istotny temat. Aktualnym top odpowiedź działa dobrze, ale tylko dla bardzo małych kropek. Jak już zauważył Bhojendra Rauniyar w komentarzach, w przypadku większych (> 2px) kropek, kropki wydają się kwadratowe, a nie okrągłe. Znalazłem tę stronę w poszukiwaniu kropek , a nie kwadratów (a nawet myślników, jak w niektórych odpowiedziach tutaj).

Opierając się na tym, użyłem radial-gradient. Ponadto, korzystając z odpowiedzi Ukuser32 , właściwości kropek można łatwo powtórzyć dla wszystkich czterech ramek. Tylko rogi nie są idealne.

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>

W radial-gradient oczekuje :

• kształt i dowolne położenie
• dwa lub więcej przystanków: kolor i promień

Tutaj chciałem kropkę o średnicy 5 pikseli (promień 2,5 piksela), z dwukrotnością średnicy (10 pikseli) między kropkami, co daje 15 pikseli. background-sizePowinien pasować nich.

Dwa stopery są zdefiniowane w taki sposób, że kropka jest ładna i gładka: jednolita czerń dla połowy promienia, a następnie gradient do pełnego promienia.

To naprawdę stare pytanie, ale ma wysoką pozycję w Google, więc zamierzam wprowadzić moją metodę, która może działać w zależności od potrzeb.

W moim przypadku chciałem grubą przerywaną ramkę, która miałaby minimalną przerwę między kreskami. Użyłem generatora wzorców CSS (takiego jak ten: http://www.patternify.com/ ), aby utworzyć wzór o szerokości 10 pikseli na 1 piksel. 9px to jednolity kolor kreski, 1px jest biały.

W moim CSS umieściłem ten wzór jako obraz tła, a następnie przeskalowałem go, używając atrybutu rozmiaru tła. Skończyło się na powtarzaniu kreski 20 na 2 piksele, 18 pikseli na linii ciągłej i 2 piksele na biało. Możesz go jeszcze bardziej powiększyć, aby uzyskać naprawdę grubą przerywaną linię.

Zaletą jest to, że obraz jest kodowany jako dane, których nie ma dodatkowe zewnętrzne żądanie HTTP, więc nie ma obciążenia wydajności. Przechowałem mój obraz jako zmienną SASS, aby móc go ponownie użyć w mojej witrynie.

Krótka odpowiedź: nie możesz.

Będziesz musiał użyć border-imagewłaściwości i kilku zdjęć.

Tak wiele osób mówi „nie możesz”. Tak, możesz. To prawda, że ​​nie istnieje reguła css kontrolująca przestrzeń rynny między kreskami, ale css ma inne zdolności. Nie mów tak szybko, że nic nie da się zrobić.

.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%;
}

Zasadniczo wysokość górnej krawędzi (w tym przypadku 5px) jest regułą określającą „szerokość” rynny. O. Oczywiście trzeba dostosować kolory do własnych potrzeb. Jest to również mały przykład dla linii poziomej, użyj lewej i prawej, aby utworzyć linię pionową.

Zrobiłem funkcję javascript do tworzenia kropek za pomocą svg. Możesz dostosować odstępy i rozmiar kropek w kodzie javascript.

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>

JEŚLI kierujesz reklamy tylko na nowoczesne przeglądarki ORAZ możesz umieścić obramowanie na innym elemencie niż treść, możesz użyć transformacji skali CSS, aby uzyskać większą kropkę lub kreskę:

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

Dostosowanie pozycji zajmuje dużo czasu, ale działa. Zmieniając grubość obramowania, rozmiar początkowy i współczynnik skali, można uzyskać żądany stosunek grubości do długości. Jedyne, czego nie można dotknąć, to stosunek kreski do przerwy.

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

to właśnie zrobiłem - użyj obrazka wprowadź opis obrazu tutaj

AFAIK nie ma na to sposobu. Możesz użyć przerywanej ramki lub może nieco zwiększyć szerokość ramki, ale po prostu CSS nie jest w stanie uzyskać więcej rozmieszczonych kropek.

Możesz utworzyć płótno (przez javascript) i narysować w nim przerywaną linię. W obszarze roboczym możesz kontrolować, jak długo powinna być kreska i przestrzeń między nimi.