Cara menambah ruang di antara titik-titik batas bertitik

Saya menggunakan perbatasan gaya bertitik di kotak saya suka

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

Saya ingin menambah ruang antara setiap titik perbatasan.

Trik ini berfungsi untuk batas horizontal dan vertikal:

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

Anda dapat menyesuaikan ukuran dengan ukuran latar belakang dan proporsi dengan persentase linear-gradien. Dalam contoh ini saya memiliki garis titik-titik titik 1px dan spasi 2px. Dengan cara ini Anda dapat memiliki beberapa batas bertitik juga menggunakan beberapa latar belakang.

Cobalah di JSFiddle ini atau lihat contoh cuplikan kode:

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>

Berikut adalah trik yang saya gunakan pada proyek baru-baru ini untuk mencapai hampir semua yang saya inginkan dengan batas horizontal. Saya menggunakan <hr/>setiap kali saya membutuhkan batas horisontal. Cara dasar untuk menambahkan perbatasan ke jam ini adalah sesuatu seperti

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

Tetapi jika Anda ingin mengendalikan perbatasan dan, misalnya menambah, jarak antar titik, Anda dapat mencoba sesuatu seperti ini:

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

Dan berikut ini, Anda membuat perbatasan Anda (inilah contoh dengan titik-titik)

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

Ini juga berarti bahwa Anda dapat menambahkan bayangan teks ke titik, gradien, dll. Apa pun yang Anda inginkan ...

Yah, ini bekerja sangat bagus untuk batas horizontal. Jika Anda membutuhkan yang vertikal, Anda dapat menentukan kelas untuk jam lain dan menggunakan rotationproperti CSS3 .

Anda tidak dapat melakukannya dengan CSS murni - spec CSS3 bahkan memiliki kutipan spesifik tentang ini:

Catatan: Tidak ada kontrol atas jarak titik-titik dan garis putus-putus, atau atas panjang garis putus-putus. Implementasi didorong untuk memilih spasi yang membuat sudut simetris.

Anda bisa, bagaimanapun, menggunakan baik perbatasan-gambar atau gambar latar belakang yang melakukan trik.

Ini menggunakan perbatasan CSS standar dan elemen pseudo + overflow: disembunyikan. Pada contoh Anda mendapatkan tiga garis putus-putus 2px berbeda: normal, spasi seperti 5px, spasi seperti 10px. Sebenarnya 10px dengan hanya 10-8 = 2px terlihat.

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>

Diterapkan pada elemen kecil dengan sudut bulat besar dapat membuat beberapa efek menyenangkan.

Jadi, mulailah dengan jawaban yang diberikan dan terapkan fakta bahwa CSS3 memungkinkan beberapa pengaturan - kode di bawah ini berguna untuk membuat kotak lengkap:

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

Perlu dicatat bahwa 10px dalam ukuran latar belakang memberikan area yang akan ditutupi oleh dasbor dan celah. 50% dari tag latar belakang adalah seberapa lebar tanda hubung sebenarnya. Karena itu dimungkinkan untuk memiliki garis putus-putus yang berbeda di setiap sisi perbatasan.

Lihat dokumen MDN untuk nilai yang tersedia untuk border-style:

• tidak ada: Tanpa batas, set lebar menjadi 0. Ini adalah nilai default.
• tersembunyi: Sama seperti 'tidak ada', kecuali dalam hal resolusi konflik perbatasan untuk elemen tabel.
• putus-putus: Seri strip pendek atau segmen garis.
• burik: Seri titik.
• ganda: Dua garis lurus yang menambahkan hingga jumlah piksel yang didefinisikan sebagai lebar-batas.
• alur: efek diukir.
• inset: Membuat kotak tampak tertanam.
• awal: Berlawanan dengan 'inset'. Membuat kotak muncul 3D (timbul).
• ridge: Berlawanan dengan 'groove'. Perbatasan muncul 3D (keluar).
• solid: Tunggal, lurus, garis solid.

Terlepas dari pilihan-pilihan itu, tidak ada cara untuk mempengaruhi gaya perbatasan standar.

Jika kemungkinan tidak sesuai dengan keinginan Anda, Anda dapat menggunakan CSS3 border-imagetetapi perhatikan bahwa dukungan browser untuk ini masih sangat jerawatan.

Membangun solusi 4 edge berdasarkan jawaban @ Eagorajose dengan sintaks steno:

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>

Ini adalah topik yang lama, tetapi masih sangat relevan. The arus atas jawabannya bekerja dengan baik, tapi hanya untuk titik-titik yang sangat kecil. Seperti yang telah ditunjukkan oleh Bhojendra Rauniyar dalam komentar, untuk titik yang lebih besar (> 2px), titik-titik tersebut tampak persegi, bukan bulat. Saya menemukan halaman ini mencari titik spasi , bukan kotak spasi (atau bahkan garis putus-putus, karena beberapa jawaban digunakan di sini).

Membangun ini, saya gunakan radial-gradient. Juga, menggunakan jawaban dari Ukuser32 , sifat-titik dapat dengan mudah diulang untuk keempat batas. Hanya sudut-sudutnya yang tidak sempurna.

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>

Yang radial-gradient diharapkan :

• bentuk dan posisi opsional
• dua atau lebih berhenti: warna dan jari-jari

Di sini, saya ingin sebuah titik 5 pixel diameter (2.5px radius), dengan 2 kali diameter (10px) antara titik-titik, menambahkan hingga 15px. The background-sizeharus sesuai ini.

Kedua stop didefinisikan sedemikian rupa sehingga titiknya bagus dan halus: hitam pekat untuk setengah jari-jari dan daripada gradien ke jari-jari penuh.

Ini adalah pertanyaan yang sangat lama tetapi memiliki peringkat tinggi di Google jadi saya akan membahas metode saya yang dapat bekerja tergantung pada kebutuhan Anda.

Dalam kasus saya, saya ingin garis putus-putus tebal yang memiliki sedikit celah di antara garis putus-putus. Saya menggunakan generator pola CSS (seperti ini: http://www.patternify.com/ ) untuk membuat lebar 10px dengan pola tinggi 1px. 9px itu adalah warna garis putus-putus, 1px berwarna putih.

Di CSS saya, saya memasukkan pola itu sebagai gambar latar belakang, dan kemudian meningkatkannya dengan menggunakan atribut ukuran latar belakang. Saya berakhir dengan 20px oleh 2px dasbor berulang, 18px dari itu menjadi garis solid dan 2px putih. Anda bisa meningkatkannya untuk garis putus-putus yang sangat tebal.

Yang menyenangkan adalah karena gambar dikodekan sebagai data Anda tidak memiliki tambahan permintaan HTTP luar, jadi tidak ada beban kinerja. Saya menyimpan gambar saya sebagai variabel SASS sehingga saya dapat menggunakannya kembali di situs saya.

Jawaban singkat: Anda tidak bisa.

Anda harus menggunakan border-imageproperti dan beberapa gambar.

Begitu banyak orang mengatakan "Kamu tidak bisa". Ya kamu bisa. Memang benar bahwa tidak ada aturan css untuk mengontrol ruang selokan di antara tanda hubung tetapi css memiliki kemampuan lain. Jangan terlalu cepat mengatakan bahwa suatu hal tidak dapat dilakukan.

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

Pada dasarnya tinggi batas atas (5px dalam kasus ini) adalah aturan yang menentukan selokan "lebar". Tentu saja Anda perlu menyesuaikan warna agar sesuai dengan kebutuhan Anda. Ini juga merupakan contoh kecil untuk garis horizontal, gunakan kiri dan kanan untuk membuat garis vertikal.

Saya membuat fungsi javascript untuk membuat titik dengan svg. Anda dapat menyesuaikan jarak dan ukuran titik dalam kode 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>

JIKA Anda hanya menargetkan browser modern, DAN Anda dapat memiliki perbatasan pada elemen terpisah dari konten Anda, maka Anda dapat menggunakan transformasi skala CSS untuk mendapatkan titik atau garis yang lebih besar:

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

Diperlukan banyak penyesuaian posisi untuk membuatnya berbaris, tetapi berhasil. Dengan mengubah ketebalan batas, ukuran awal dan faktor skala, Anda dapat mencapai rasio ketebalan-panjang yang Anda inginkan. Satu-satunya hal yang tidak dapat Anda sentuh adalah rasio dash-to-gap.

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

inilah yang saya lakukan - gunakan gambar masukkan deskripsi gambar di sini

AFAIK tidak ada cara untuk melakukan ini. Anda bisa menggunakan garis batas putus-putus atau mungkin sedikit menambah lebar batas, tetapi hanya mendapatkan lebih banyak titik tidak mungkin dengan CSS.

Anda bisa membuat kanvas (via javascript) dan menggambar garis putus-putus di dalamnya. Di dalam kanvas Anda dapat mengontrol berapa lama tanda hubung dan ruang di antara akan.