Noktalı kenarlık noktaları arasındaki boşluk nasıl artırılır

Kutumda noktalı stil kenarlığı kullanıyorum

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

Sınırın her bir noktası arasındaki boşluğu artırmak istiyorum.

Bu hile hem yatay hem de dikey kenarlıklar için çalışır:

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

Boyutu arka plan boyutuyla ve orantıyı doğrusal gradyan yüzdeleriyle ayarlayabilirsiniz. Bu örnekte 1 piksel noktalı ve 2 piksel aralıklı noktalı bir çizgim var. Bu şekilde, birden çok arka plan kullanarak birden çok noktalı kenarlığa sahip olabilirsiniz.

Bu JSFiddle'da deneyin veya kod snippet örneğine bir göz atın:

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>

İşte son zamanlarda yatay kenarlıklarla istediğim her şeyi elde etmek için kullandığım bir püf noktası. <hr/>Her yatay sınıra ihtiyacım olduğunda kullanıyorum . Bu saate bir kenarlık eklemenin temel yolu

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

Ancak sınırın kontrolünü ele geçirmek ve örneğin noktalar arasındaki boşluğu artırmak istiyorsanız, şöyle bir şey deneyebilirsiniz:

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

Ve aşağıda, sınırınızı oluşturursunuz (burada noktalara sahip bir örnek)

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

Bu ayrıca noktalara, degradelere vb. Metin gölgesi ekleyebileceğiniz anlamına gelir.

Yatay sınırlar için gerçekten harika çalışıyor. Dikey olanlara ihtiyacınız varsa, başka bir saat için bir sınıf belirtebilir ve CSS3 rotationözelliğini kullanabilirsiniz .

Saf CSS ile yapamazsınız - CSS3 spesifikasyonunun bununla ilgili özel bir teklifi bile vardır:

Not: Noktaların ve kısa çizgilerin aralığı üzerinde veya kısa çizgilerin uzunluğu üzerinde herhangi bir denetim yoktur. Uygulamalar köşeleri simetrik hale getirecek bir boşluk seçmeye teşvik edilir.

Bununla birlikte, hile yapan bir kenarlık görüntüsü veya arka plan görüntüsü kullanabilirsiniz.

Bu, standart CSS kenarlığını ve sözde öğe + taşma: gizli kullanır. Örnekte üç farklı 2 piksel kesikli kenarlık elde edersiniz: normal, 5 piksel gibi aralıklı, 10 piksel gibi aralıklı. Aslında 10px sadece 10-8 = 2px görünür.

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>

Büyük yuvarlatılmış köşeleri olan küçük elemanlara uygulandığında bazı eğlenceli efektler elde edebilirsiniz.

Bu yüzden verilen cevaptan başlayarak ve CSS3'ün birden fazla ayara izin verdiği gerçeğini uygulayarak - aşağıdaki kod tam bir kutu oluşturmak için yararlıdır:

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

Arka plan boyutundaki 10 pikselin çizgi ve boşluğun kaplayacağı alana verdiğini belirtmek gerekir. Arka plan etiketinin% 50'si çizgi gerçekte ne kadar geniştir. Bu nedenle, her kenar tarafında farklı uzunluk çizgileri olması mümkündür.

Aşağıdakiler için kullanılabilir değerler için MDN belgelerine bakın border-style:

• none: Kenarlık yok, genişliği 0 olarak ayarlar. Bu, varsayılan değerdir.
• hidden: Tablo öğelerinin sınır çakışması çözümü hariç, 'hiçbiri' ile aynı.
• kesikli: Kısa kesikli çizgiler veya çizgi segmentleri.
• noktalı: Nokta serisi.
• çift: Kenarlık genişliği olarak tanımlanan piksel miktarına kadar eklenen iki düz çizgi.
• oluk: Oyma etkisi.
• inset: Kutunun gömülü görünmesini sağlar.
• başlangıç: 'iç metin' karşısı. Kutunun 3D (kabartmalı) görünmesini sağlar.
• sırt: 'oluğun' karşısında. Kenarlık 3D görünür (çıkıyor).
• düz: Tek, düz, düz çizgi.

Bu seçeneklerin yanı sıra, standart sınırın tarzını etkilemenin bir yolu yoktur.

Olasılıklar beğeninize yoksa, sen olabilir CSS3 kullanalım border-imageancak bunun için tarayıcı desteği çok sivilceli hala olduğunu not.

@ Eagorajose'un steno sözdizimi ile verdiği cevaba dayanarak 4 kenar çözümü oluşturmak:

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>

Bu eski, ama yine de çok alakalı bir konudur. Şu anki en iyi cevap iyi çalışıyor, ancak sadece çok küçük noktalar için. Bhojendra Rauniyar'ın yorumlarda zaten belirttiği gibi, daha büyük (> 2px) noktalar için noktalar yuvarlak değil kare görünür. Bu sayfayı , aralıklı kareleri değil aralıklı noktaları ararken buldum (hatta bazı cevapların kullandığı gibi tire).

Buna dayanarak kullandım radial-gradient. Ayrıca, Ukuser32'nin cevabı kullanılarak , nokta özellikleri dört kenarlığın tümü için kolayca tekrarlanabilir. Sadece köşeler mükemmel değil.

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>

radial-gradient beklediği :

• şekil ve isteğe bağlı konum
• iki veya daha fazla durak: bir renk ve yarıçap

Burada, 5 piksel çapında (2,5 piksel yarıçap) bir nokta istedim, noktalar arasında 2 kat daha fazla (10 piksel), 15 piksele kadar ekledim. background-sizeBu uymalıdır.

İki durak, noktanın güzel ve pürüzsüz olacağı şekilde tanımlanır: yarıçapın yarısı için tam siyah ve tam yarıçap için bir gradyan.

Bu gerçekten eski bir soru ama Google'da yüksek bir sıralamaya sahip, bu yüzden ihtiyaçlarınıza bağlı olarak çalışabilecek yöntemimi atacağım.

Benim durumumda, çizgiler arasında minimum bir kırılma olan kalın kesikli bir kenarlık istedim. Bir CSS desen oluşturucu kullandım (bunun gibi: http://www.patternify.com/ piksel genişliğinde ve 1 piksel uzunluğunda bir desen oluşturmak için ). 9px katı çizgi rengidir, 1px beyazdır.

CSS'imde bu deseni arka plan görüntüsü olarak ekledim ve ardından arka plan boyutu özelliğini kullanarak ölçeklendirdim. Sonunda 20px 2px tekrarlanan çizgi, 18px düz çizgi ve 2px beyaz oldu. Gerçekten kalın kesikli bir çizgi için daha da büyütebilirsiniz.

Güzel bir şey, görüntü veri olarak kodlandığı için ek dış HTTP isteğiniz olmadığı için performans yükü yoktur. Resmimi SASS değişkeni olarak sakladım, böylece sitemde tekrar kullanabildim.

Kısa cevap: Yapamazsınız.

border-imageÖzellik ve birkaç resim kullanmanız gerekecek .

Pek çok insan "Yapamazsın" der. Evet yapabilirsin. Çizgiler arasındaki oluk boşluğunu kontrol etmek için bir css kuralı olmadığı, ancak css'in başka yetenekleri olduğu doğrudur. Bir şeyin yapılamayacağını söylemek için çok hızlı olma.

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

Temel olarak kenarlık yüksekliği (bu durumda 5 piksel), oluğun "genişliğini" belirleyen kuraldır. Tabii ki renkleri ihtiyaçlarınıza göre ayarlamanız gerekir. Bu aynı zamanda yatay bir çizgi için küçük bir örnektir, dikey çizgiyi yapmak için sol ve sağ kullanın.

Svg ile noktalar oluşturmak için bir javascript işlevi yaptım. Javascript kodunda nokta aralığını ve boyutunu ayarlayabilirsiniz.

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>

Yalnızca modern tarayıcıları hedefliyorsanız VE sınırınızı içeriğinizden ayrı bir öğeye sahip olabilirseniz, daha büyük bir nokta veya çizgi elde etmek için CSS ölçek dönüşümünü kullanabilirsiniz:

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

Sıralamak için çok fazla konum ayarlaması gerekiyor, ancak işe yarıyor. Kenarlığın kalınlığını, başlangıç ​​boyutunu ve ölçek faktörünü değiştirerek, istediğiniz yaklaşık kalınlık-uzunluk oranına ulaşabilirsiniz. Dokunamayacağınız tek şey tire-boşluk oranıdır.

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

yaptığım şey budur - bir resim kullanın resim açıklamasını buraya girin

AFAIK bunu yapmanın bir yolu yok. Kesikli bir kenarlık kullanabilir veya kenarlığın genişliğini biraz artırabilirsiniz, ancak CSS ile daha fazla aralıklı nokta elde etmek imkansızdır.

Bir tuval oluşturabilir (javascript aracılığıyla) ve içine noktalı bir çizgi çizebilirsiniz. Tuval içinde çizgi ve aradaki boşluğun ne kadar süreceğini kontrol edebilirsiniz.