วิธีเพิ่มช่องว่างระหว่างจุดเส้นขอบประ

ฉันใช้เส้นประสไตล์ในกล่องของฉันเช่น

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

ฉันต้องการที่จะเพิ่มช่องว่างระหว่างจุดของเส้นขอบแต่ละ

เคล็ดลับนี้ใช้ได้กับทั้งแนวนอนและแนวตั้ง:

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

คุณสามารถปรับขนาดด้วยขนาดพื้นหลังและสัดส่วนด้วยเปอร์เซ็นต์การไล่ระดับสีเชิงเส้น ในตัวอย่างนี้ฉันมีเส้นประของจุด 1px และระยะห่าง 2px วิธีนี้คุณสามารถมีเส้นประหลายจุดด้วยการใช้พื้นหลังหลายแบบ

ลองใช้ในJSFiddleนี้หรือดูตัวอย่างโค้ดขนาดสั้น:

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>

นี่คือเคล็ดลับที่ฉันใช้ในโครงการล่าสุดเพื่อให้บรรลุเกือบทุกอย่างที่ฉันต้องการด้วยเส้นขอบแนวนอน ฉันใช้<hr/>ทุกครั้งที่ฉันต้องการชายแดนแนวนอน วิธีพื้นฐานในการเพิ่มเส้นขอบให้กับ HR นี้เป็นสิ่งที่ต้องการ

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

แต่ถ้าคุณต้องการควบคุมเส้นขอบและเช่นการเพิ่มช่องว่างระหว่างจุดคุณอาจลองดังนี้:

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

และในต่อไปนี้คุณสร้างเส้นขอบของคุณ (นี่คือตัวอย่างที่มีจุด)

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

นอกจากนี้ยังหมายความว่าคุณสามารถเพิ่ม text-shadow ให้กับจุดการไล่ระดับสีเป็นต้นสิ่งที่คุณต้องการ ...

มันใช้งานได้ดีมากสำหรับขอบแนวนอน หากคุณต้องการวัตถุแนวตั้งคุณสามารถระบุคลาสสำหรับชั่วโมงอื่นและใช้rotationคุณสมบัติCSS3

คุณไม่สามารถทำได้ด้วย CSS บริสุทธิ์ - สเป็ค CSS3แม้มีการอ้างอิงเฉพาะเกี่ยวกับเรื่องนี้:

หมายเหตุ: ไม่มีการควบคุมระยะห่างของจุดและขีดคั่นหรือความยาวของขีดกลาง การใช้งานได้รับการสนับสนุนในการเลือกระยะห่างที่ทำให้มุมสมมาตร

อย่างไรก็ตามคุณสามารถใช้ภาพเส้นขอบหรือภาพพื้นหลังที่ใช้กลอุบายได้

สิ่งนี้ใช้ชายแดน CSS มาตรฐานและองค์ประกอบเทียม + ล้น: ซ่อน ในตัวอย่างคุณจะได้รับเส้นประ 2px ที่ต่างกันสามเส้น: ปกติเว้นระยะเช่น 5px เว้นระยะห่างเช่น 10px จริง ๆ แล้วคือ 10px โดยมองเห็นได้เพียง 10-8 = 2px

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>

นำไปใช้กับองค์ประกอบขนาดเล็กที่มีมุมโค้งมนขนาดใหญ่อาจทำให้เอฟเฟ็กต์สนุก ๆ

ดังนั้นเริ่มต้นด้วยคำตอบที่กำหนดและใช้ความจริงที่ว่า CSS3 อนุญาตการตั้งค่าหลายรายการ - รหัสด้านล่างมีประโยชน์สำหรับการสร้างกล่องสมบูรณ์:

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

เป็นที่น่าสังเกตว่าขนาด 10px ในขนาดพื้นหลังทำให้พื้นที่ที่เส้นประและช่องว่างนั้นครอบคลุม 50% ของแท็กพื้นหลังคือความกว้างของเส้นประที่แท้จริง ดังนั้นจึงมีความเป็นไปได้ที่จะมีขีดกลางความยาวแตกต่างกันในแต่ละเส้นขอบ

ดูเอกสาร MDNสำหรับค่าที่มีอยู่สำหรับborder-style:

• none: ไม่มีเส้นขอบ, ตั้งค่าความกว้างเป็น 0 นี่คือค่าเริ่มต้น
• ซ่อน: เหมือนกับ 'ไม่มี' ยกเว้นในแง่ของการแก้ปัญหาความขัดแย้งชายแดนสำหรับองค์ประกอบตาราง
• ประ: ชุดของขีดกลางสั้นหรือส่วนของเส้น
• ประ: ชุดของจุด
• double: เส้นตรงสองเส้นที่รวมกันเป็นจำนวนพิกเซลที่กำหนดเป็นความกว้างชายแดน
• ร่อง: ผลการแกะสลัก
• สิ่งที่ใส่เข้าไป: ทำให้กล่องปรากฏขึ้น
• เริ่ม: ตรงข้ามของ 'สิ่งที่ใส่เข้าไป' ทำให้กล่องปรากฏเป็น 3D (นูน)
• สัน: ตรงข้ามกับ 'ร่อง' เส้นขอบจะปรากฏเป็น 3 มิติ (กำลังออกมา)
• ทึบ: เส้นตรงเส้นทึบ

นอกเหนือจากตัวเลือกเหล่านั้นไม่มีวิธีใดที่จะมีอิทธิพลต่อสไตล์ของเส้นขอบมาตรฐาน

หากความเป็นไปได้ที่คุณไม่ชอบคุณสามารถใช้ CSS3 border-imageแต่โปรดทราบว่าการสนับสนุนเบราว์เซอร์สำหรับสิ่งนี้ยังคงเป็นจุด ๆ

การสร้างโซลูชัน 4 edge โดยอิงตามคำตอบของ @ Eagorajose ด้วยไวยากรณ์ชวเลข:

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>

นี่เป็นหัวข้อเก่า แต่ยังคงมีความเกี่ยวข้องมาก คำตอบด้านบนในปัจจุบันทำงานได้ดี แต่สำหรับจุดมีขนาดเล็กมาก เมื่อ Bhojendra Rauniyar ชี้ให้เห็นในความคิดเห็นแล้วสำหรับจุดที่มีขนาดใหญ่กว่า (> 2px) จุดนั้นจะปรากฏเป็นรูปสี่เหลี่ยมไม่ใช่รอบ ฉันพบหน้านี้เพื่อค้นหาจุดที่มีระยะห่างไม่ใช่สแควร์สเปซ (หรือแม้กระทั่งเครื่องหมายขีดคั่นเนื่องจากมีคำตอบที่นี่ใช้)

radial-gradientอาคารนี้ผมใช้ นอกจากนี้การใช้คำตอบจาก Ukuser32สามารถทำซ้ำคุณสมบัติจุดทั้งสี่ได้อย่างง่ายดาย เฉพาะมุมที่ไม่สมบูรณ์

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 คาดหวัง :

• รูปร่างและตำแหน่งที่เลือกได้
• สองป้ายขึ้นไป: สีและรัศมี

ที่นี่ฉันต้องการจุดเส้นผ่านศูนย์กลาง 5 พิกเซล (รัศมี 2.5px) กับ 2 เท่าของเส้นผ่าศูนย์กลาง (10px) ระหว่างจุดนั้นเพิ่มขึ้นสูงสุด 15px background-sizeควรจะตรงกับเหล่านี้

มีการกำหนดจุดหยุดสองจุดเพื่อให้จุดดีและราบรื่น: สีดำทึบสำหรับรัศมีครึ่งหนึ่งและมากกว่าการไล่ระดับสีจนถึงรัศมีเต็ม

นี่เป็นคำถามที่เก่ามาก แต่มีอันดับสูงใน Google ดังนั้นฉันจะโยนในวิธีการของฉันซึ่งสามารถทำงานได้ขึ้นอยู่กับความต้องการของคุณ

ในกรณีของฉันฉันต้องการเส้นขอบที่มีเส้นประหนาซึ่งมีช่วงพักระหว่างเส้นประเล็กน้อย ฉันใช้ตัวสร้างรูปแบบ CSS (เช่นนี้: http://www.patternify.com/ ) เพื่อสร้างรูปแบบที่กว้าง 10 x 10 x 1px 9px ของที่เป็นสีเส้นประทึบ 1px เป็นสีขาว

ใน CSS ของฉันฉันรวมรูปแบบนั้นเป็นภาพพื้นหลังแล้วปรับขนาดขึ้นโดยใช้แอตทริบิวต์ขนาดพื้นหลัง ฉันลงเอยด้วยเส้นขีดซ้ำ 20px คูณ 2px, 18px ของเส้นทึบและขาว 2px คุณสามารถขยายให้มากขึ้นสำหรับเส้นประที่หนาจริงๆ

สิ่งที่ดีคือเนื่องจากภาพถูกเข้ารหัสเป็นข้อมูลที่คุณไม่ได้มีการร้องขอ HTTP นอกเพิ่มเติมดังนั้นจึงไม่มีภาระงาน ฉันจัดเก็บภาพของฉันเป็นตัวแปร SASS เพื่อให้สามารถนำมาใช้ซ้ำได้ในเว็บไซต์ของฉัน

คำตอบสั้น ๆ : คุณทำไม่ได้

คุณจะต้องใช้border-imageคุณสมบัติและรูปภาพไม่กี่ภาพ

ผู้คนมากมายพูดว่า "คุณทำไม่ได้" ใช่คุณสามารถ. เป็นความจริงที่ว่าไม่มีกฎ CSS เพื่อควบคุมช่องว่างระหว่างรางน้ำ แต่ css มีความสามารถอื่น ๆ อย่าด่วนเกินไปที่จะบอกว่าสิ่งที่ไม่สามารถทำได้

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

โดยทั่วไปความสูงของเส้นขอบ (5px ในกรณีนี้) เป็นกฎที่กำหนด "ความกว้าง" ของรางน้ำ O ถ้าคุณต้องการปรับสีให้ตรงกับความต้องการของคุณ นี่เป็นตัวอย่างเล็ก ๆ สำหรับเส้นแนวนอนใช้ซ้ายและขวาเพื่อทำเส้นแนวตั้ง

ฉันสร้างฟังก์ชันจาวาสคริปต์เพื่อสร้างจุดด้วย svg คุณสามารถปรับระยะห่างระหว่างจุดและขนาดได้ในรหัสจาวาสคริปต์

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>

หากคุณกำหนดเป้าหมายเฉพาะเบราว์เซอร์สมัยใหม่และคุณสามารถกำหนดขอบเขตให้กับองค์ประกอบแยกต่างหากจากเนื้อหาของคุณจากนั้นคุณสามารถใช้การแปลงสเกล CSS เพื่อให้ได้จุดหรือเส้นประที่ใหญ่ขึ้น:

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

ต้องใช้การปรับแต่งตำแหน่งจำนวนมากเพื่อให้เข้าแถว แต่ใช้งานได้ ด้วยการเปลี่ยนความหนาของเส้นขอบขนาดเริ่มต้นและตัวคูณสเกลคุณสามารถไปถึงอัตราส่วนความหนาความยาวที่คุณต้องการ สิ่งเดียวที่คุณไม่สามารถสัมผัสได้คืออัตราส่วนของเส้นประกับช่องว่าง

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

นี่คือสิ่งที่ฉันทำ - ใช้ภาพ ใส่คำอธิบายภาพที่นี่

AFAIK ไม่มีวิธีการทำเช่นนี้ คุณสามารถใช้เส้นขอบประหรืออาจเพิ่มความกว้างของเส้นขอบเล็กน้อย แต่การเพิ่มจุดที่มีระยะห่างมากขึ้นนั้นเป็นไปไม่ได้ด้วย CSS

คุณสามารถสร้าง Canvas (ผ่าน javascript) และวาดเส้นประภายใน ภายในผืนผ้าใบคุณสามารถควบคุมระยะเวลาในการแดชและช่องว่างระหว่างนั้นได้