Jak zwiększyć przestrzeń między kropkowanymi kropkami

Oto sztuczka, której użyłem w ostatnim projekcie, aby osiągnąć prawie wszystko, co chcę z poziomymi granicami. Używam <hr/> za każdym razem, gdy potrzebuję poziomej granicy. Podstawowym sposobem dodawania obramowania do tego hr jest coś w rodzaju

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

Ale jeśli chcesz przejąć kontrolę nad granicą 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;
}

I w dalszej części tworzysz obramowanie (tutaj przykład z kropkami)

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

Oznacza to również że można dodać tekst-cień do kropek, gradientów itp. Cokolwiek zechcesz...

Dobrze, to działa naprawdę świetnie dla poziomych granic. Jeśli potrzebujesz pionowych, możesz określić klasę dla innego hr i użyć właściwości CSS3 rotation.

Nie możesz tego zrobić z czystym CSS - SPEC CSS3 ma nawet konkretny cytat na ten temat:

Uwaga: nie ma kontroli nad odstępami kropek i kresek, ani nad długością kresek. Implementacje są zachęcane do wyboru odstępu, który sprawia, że narożniki są symetryczne.

Można jednak użyć obrazu obramowania lub obrazu tła, który robi sztuczkę.

Zobacz MDC docs dla dostępnych wartości dla border-style:

• none: Brak obramowania, ustawia szerokość na 0. Jest to wartość domyślna.
• hidden: to samo co 'none', z wyjątkiem rozwiązywanie konfliktów granicznych w tabeli żywioły.
• przerywany: seria krótkich kreski lub segmenty linii.
• kropkowany : Seria kropek.
• Podwójny: Dwa proste linie, które sumują się do ilości pikseli zdefiniowana jako szerokość obramowania.
• groove : Efekt rzeźbiony.
• wstawka: sprawia, że pudełko pojawiają się osadzone.
• początek: przeciwieństwo "inset". Sprawia, że pudełko wygląda 3D (tłoczone).
• grzbiet: Opposite of "groove" Obramowanie pojawia się 3D (coming out).
• solid: Single, prosta, solidna linia.

Poza tymi wyborami, nie ma sposobu, aby wpłynąć na styl standard border.

Jeśli możliwości tam nie są do Twoich potrzeb, można używać CSS3 ' s border-image Należy jednak pamiętać, że obsługa przeglądarki jest nadal bardzo spotty.

Używa standardowej granicy CSS i pseudo elementu + overflow: hidden. W przykładzie otrzymasz trzy różne ramki 2px: normal, spaced like a 5px, spaced like a 10px. Jest rzeczywiście 10px z tylko 10-8 = 2px widoczne.

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>

Zastosowane do małych elementów z dużymi zaokrąglonymi rogami może sprawić, że efekty będą zabawne.

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

W moim przypadku, chciałem grubą granicę przerywaną, która miała minimalne przerwy między myślnikami. Użyłem CSS pattern generator (jak ten: http://www.patternify.com / ), Aby utworzyć wzór 10px szeroki przez 1px wysoki. 9px z tego jest jednolity kolor kreski, 1px jest biały.

W moim CSS umieściłem ten wzór jako obrazek tła i następnie przeskaluj go używając atrybutu background-size. I skończyło się z 20px przez 2px powtórzony dash, 18px to jest solid line i 2px biały. Można ją jeszcze bardziej powiększyć, aby uzyskać naprawdę grubą linię przerywaną.

Fajne jest to, że ponieważ obraz jest zakodowany jako dane, nie masz dodatkowego zewnętrznego żądania HTTP, więc nie ma obciążenia wydajności. Zapisałem mój obraz jako zmienną SASS, więc mogłem go ponownie wykorzystać w mojej witrynie.

Więc zaczynając od odpowiedzi i stosując fakt, że CSS3 pozwala na wiele ustawień-poniższy kod jest przydatny do tworzenia pełnego pola:

#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 10px w rozmiarze tła daje obszar, który kreska i szczelina pokryją. 50% tagu tła to szerokość kreski. Dlatego możliwe jest posiadanie różnej długości kresek na każdej stronie granicy.

Krótka odpowiedź: nie możesz.

Będziesz musiał użyć border-image nieruchomość i kilka zdjęć.

Jeśli celujesz tylko w nowoczesne przeglądarki i możesz mieć obramowanie na oddzielnym elemencie od zawartości, możesz użyć transformacji skali CSS, aby uzyskać większą kropkę lub myślnik:

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

Tak wiele osób mówi "nie możesz". Możesz. To prawda, że nie ma reguły css do kontrolowania przestrzeni rynien między myślnikami, ale css ma inne możliwości. Nie mów tak szybko, że czegoś 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ść obramowania (w tym przypadku 5px) jest regułą określającą "szerokość"rynny. Oczywiście musisz dostosować kolory do swoich potrzeb. Jest to również mały przykład dla linii poziomej, Użyj lewej i prawej, aby linia pionowa.

AFAIK nie ma na to sposobu. Możesz użyć przerywanej ramki lub zwiększyć jej szerokość, ale po prostu bardziej rozmieszczone kropki są niemożliwe dzięki CSS.

Możesz utworzyć kanwę (za pomocą javascript) i narysować w niej przerywaną linię. W obszarze roboczym możesz kontrolować długość kreski i odstępu pomiędzy nimi.