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

286

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.

Kali Charan Rajput
źródło

Odpowiedzi:

444

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:

Olivictor
źródło
26
Powinna być wybrana odpowiedź.
Kevin Jurkowski
7
imho to hack n stopnia.
Muhammad Umer
7
Chcę zrobić to samo, ale szerokość kropkowanej ramki wynosi 3px zamiast 1px, a teraz staje się kwadratowa niż kropkowana.
Bhojendra Rauniyar
5
Zrobiłem mixin SCSS, aby to zaimplementować i szybko zmieniać kolory i odstępy. Sprawdź to na github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin .
Flor Braz,
5
Co jeśli chcę, aby wszystkie 4 krawędzie były przerywane?
Ryan Shillington
141

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 .

Matt
źródło
2
Czy ta przeglądarka jest kompatybilna?
J82
57
Nie mogę sobie wyobrazić, jaki ból w ** byłby do utrzymania.
Kzqai,
1
jak uzyskać ten sam efekt dla pionowego?
Rinku
4
@Rinku with transform: rotate (90deg); Blok wyświetlacza;
Jeroen K
4
takie brzydkie, ale takie sprytne :) Zauważyłem również, że mogę mieć lepszą kontrolę nad umieszczeniem, jeśli ustawię wysokość: 0; i użyj paddingu, aby kontrolować umiejscowienie. Więc chciałem kropkowaną linię na dole z małym pokojem poniżej, więc użyłem paddingu: 0 0 10px;
MatthewLee
121

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

Shadikka
źródło
7
Możesz użyć gradientów (czysty CSS) do w pełni konfigurowalnej ramki. Zobacz odpowiedź poniżej
Olivictor
3
-1, @Shadikka Co CSS3 spec mówi, że to nie może być wykonane przy użyciu border: dotted, ale jest możliwe, aby to zrobić za pomocą gradientów jako odpowiedź Eagorajose wykazała.
Pacerier
30

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.

Lenioia
źródło
2
Dobra robota! Jest to jedyna z tych odpowiedzi, która naprawdę działa, ale nie jest straszna w utrzymaniu, IMO. Nawet zaakceptowana odpowiedź działa tylko dla jednej krawędzi div. Działa to na całą granicę.
Ryan Shillington
1
To zdecydowanie najlepsza i najbardziej elegancka odpowiedź. Powinien być oznaczony jako rozwiązanie ...
Beejee
19

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.

Ukuser32
źródło
17

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.

Pekka
źródło
dzięki pekka, to znaczy, że nie mogę użyć właściwości border ... więc muszę użyć do tego obrazu.
Kali Charan Rajput
@kc, jeśli żaden ze stylów obramowania nie przypadnie Ci do gustu, tak.
Pekka
8

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>

Aleksander Stelmaczonek
źródło
8

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.

Marten Koetsier
źródło
6

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.

Nick Angiolillo
źródło
2

Krótka odpowiedź: nie możesz.

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

Crozin
źródło
2

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

devinfd
źródło
1
Szczerze mówiąc, myślę, że większość ludzi mówi, że nie można tego zrobić w dosłownym pytaniu o dostosowanie stylizacji z kropkowanymi ramkami. Nie twierdzą, że coś podobnego nie jest możliwe przy użyciu innych właściwości CSS. Moim zdaniem z semantycznego punktu widzenia bardziej sensowne jest użycie obrazu tła lub obrazu obramowania, jak pokazali inni, niż użycie pseudoelementów i kilkunastu linii CSS.
Alex
2

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>

dmodo
źródło
1

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.

Dave
źródło
W ten sposób treść zostanie również zastosowanascale(8)
Pardeep Jain
obramowanie: 1 piksel przerywany czarny; jest uważana za nieznaną właściwość w przeglądarce Chrome.
Inzmam ul Hassan
1
<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

Christine Nicole Yu
źródło
0

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.

Bojangles
źródło
0

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.

velop
źródło
To bardzo skomplikowane rozwiązanie. Nie mogę się oprzeć wrażeniu, że kosztowałoby to również nieco więcej wydajności i postrzeganych czasów ładowania, w zależności od wagi reszty JS na stronie.
Emmett R.