Làm thế nào để tăng không gian giữa các chấm viền

Tôi đang sử dụng đường viền chấm trong hộp của mình như

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

Tôi muốn tăng không gian giữa mỗi dấu chấm của đường viền.

Thủ thuật này hoạt động cho cả biên ngang và dọc:

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

Bạn có thể điều chỉnh kích thước với kích thước nền và tỷ lệ với tỷ lệ phần trăm tuyến tính. Trong ví dụ này, tôi có một đường chấm chấm 1px và khoảng cách 2px. Bằng cách này, bạn có thể có nhiều đường viền chấm bằng cách sử dụng nhiều nền.

Hãy thử nó trong JSFiddle này hoặc xem ví dụ về đoạn mã:

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>

Đây là một mẹo tôi đã sử dụng trong một dự án gần đây để đạt được gần như mọi thứ tôi muốn với đường viền ngang. Tôi sử dụng <hr/>mỗi lần tôi cần một đường viền ngang. Cách cơ bản để thêm đường viền vào giờ này là một cái gì đó như

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

Nhưng nếu bạn muốn kiểm soát đường viền và, ví dụ, tăng khoảng trắng giữa các dấu chấm, bạn có thể thử một cái gì đó như thế này:

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

Và sau đây, bạn tạo đường viền của mình (đây là một ví dụ có dấu chấm)

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

Điều này cũng có nghĩa là bạn có thể thêm bóng văn bản vào các dấu chấm, độ dốc, v.v. Bất cứ điều gì bạn muốn ...

Vâng, nó hoạt động thực sự tuyệt vời cho biên ngang. Nếu bạn cần những hàng dọc, bạn có thể chỉ định một lớp cho một giờ khác và sử dụng thuộc tính CSS3 rotation.

Bạn không thể làm điều đó với CSS thuần túy - thông số CSS3 thậm chí có một trích dẫn cụ thể về điều này:

Lưu ý: Không có quyền kiểm soát khoảng cách của dấu chấm và dấu gạch ngang, cũng như không vượt quá chiều dài của dấu gạch ngang. Việc triển khai được khuyến khích để chọn một khoảng cách làm cho các góc đối xứng.

Tuy nhiên, bạn có thể sử dụng hình ảnh viền hoặc hình nền thực hiện thủ thuật.

Điều này sử dụng đường viền CSS tiêu chuẩn và phần tử giả + tràn: ẩn. Trong ví dụ này, bạn nhận được ba đường viền nét đứt 2px khác nhau: bình thường, cách nhau như 5px, cách nhau như 10px. Thực sự là 10px chỉ hiển thị 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>

Áp dụng cho các yếu tố nhỏ với các góc tròn lớn có thể tạo ra một số hiệu ứng thú vị.

Vì vậy, bắt đầu với câu trả lời được đưa ra và áp dụng thực tế là CSS3 cho phép nhiều cài đặt - đoạn mã dưới đây rất hữu ích để tạo một hộp hoàn chỉnh:

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

Đáng chú ý của nó là 10px ở kích thước nền cho khu vực mà dấu gạch ngang và khoảng trống sẽ bao phủ. 50% của thẻ nền là độ rộng thực sự của dấu gạch ngang. Do đó, có thể có các dấu gạch ngang có độ dài khác nhau ở mỗi bên biên.

Xem tài liệu MDN để biết các giá trị khả dụng cho border-style:

• none: Không có viền, đặt chiều rộng thành 0. Đây là giá trị mặc định.
• ẩn: Tương tự như 'không', ngoại trừ về mặt giải quyết xung đột biên cho các thành phần bảng.
• nét đứt: Chuỗi các dấu gạch ngang ngắn hoặc các đoạn thẳng.
• chấm: Hàng loạt dấu chấm.
• double: Hai đường thẳng cộng với số lượng pixel được xác định là độ rộng đường viền.
• Rãnh: Hiệu ứng chạm khắc.
• inet: Làm cho hộp xuất hiện nhúng.
• outset: Đối diện với 'inset'. Làm cho hộp xuất hiện 3D (dập nổi).
• sườn núi: Đối diện với 'rãnh'. Đường viền xuất hiện 3D (sắp ra).
• solid: Đơn, thẳng, rắn.

Ngoài những lựa chọn đó, không có cách nào để tác động đến phong cách của đường viền tiêu chuẩn.

Nếu các khả năng không theo ý thích của bạn, bạn có thể sử dụng CSS3 border-imagenhưng lưu ý rằng hỗ trợ trình duyệt cho việc này vẫn còn rất nhiều.

Xây dựng giải pháp 4 cạnh dựa trên câu trả lời của @ Eagorajose với cú pháp tốc ký:

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>

Đây là một chủ đề cũ, nhưng vẫn rất liên quan. Các đầu câu trả lời hiện tại hoạt động tốt, nhưng chỉ cho dấu chấm rất nhỏ. Như Bhojendra Rauniyar đã chỉ ra trong các bình luận, đối với các chấm lớn hơn (> 2px), các chấm xuất hiện vuông, không tròn. Tôi tìm thấy trang này để tìm kiếm các chấm cách đều nhau , không phải các ô vuông cách nhau (hoặc thậm chí là dấu gạch ngang, như một số câu trả lời ở đây sử dụng).

Xây dựng trên này, tôi đã sử dụng radial-gradient. Ngoài ra, bằng cách sử dụng câu trả lời từ Ukuser32 , các thuộc tính dấu chấm có thể dễ dàng được lặp lại cho cả bốn viền. Chỉ có những góc không hoàn hảo.

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>

Những radial-gradient kỳ vọng :

• hình dạng và vị trí tùy chọn
• hai hoặc nhiều điểm dừng: một màu và bán kính

Ở đây, tôi muốn một chấm có đường kính 5 pixel (bán kính 2,5px), với 2 lần đường kính (10px) giữa các chấm, thêm tối đa 15px. Các background-sizenên đúng với những.

Hai điểm dừng được xác định sao cho dấu chấm đẹp và mịn: màu đen đặc cho một nửa bán kính và hơn một độ dốc cho bán kính đầy đủ.

Đây là một câu hỏi thực sự cũ nhưng nó có thứ hạng cao trong Google vì vậy tôi sẽ sử dụng phương pháp của mình để có thể hoạt động tùy theo nhu cầu của bạn.

Trong trường hợp của tôi, tôi muốn có một đường viền đứt nét dày có một khoảng nghỉ tối thiểu giữa các dấu gạch ngang. Tôi đã sử dụng một trình tạo mẫu CSS (như thế này: http://www.potypeify.com/ ) để tạo một mẫu cao 10px x 1px. 9px trong đó là màu dash rắn, 1px là màu trắng.

Trong CSS của tôi, tôi đã bao gồm mẫu đó làm hình nền, sau đó thu nhỏ nó bằng cách sử dụng thuộc tính kích thước nền. Tôi đã kết thúc với một dấu gạch ngang lặp lại 20px x 2px, 18px là đường liền nét và 2px trắng. Bạn có thể mở rộng nó hơn nữa cho một đường đứt nét thực sự dày.

Điều tuyệt vời là vì hình ảnh được mã hóa dưới dạng dữ liệu bạn không có thêm yêu cầu HTTP bên ngoài, do đó không có gánh nặng hiệu suất. Tôi đã lưu trữ hình ảnh của mình dưới dạng biến SASS để tôi có thể sử dụng lại nó trong trang web của mình.

Câu trả lời ngắn gọn: Bạn không thể.

Bạn sẽ phải sử dụng border-imagetài sản và một vài hình ảnh.

Vì vậy, nhiều người nói "Bạn không thể". Có bạn có thể. Đúng là không có quy tắc css để kiểm soát không gian máng xối giữa các dấu gạch ngang nhưng css có các khả năng khác. Đừng quá nhanh để nói rằng một điều không thể được thực hiện.

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

Về cơ bản, chiều cao trên đỉnh (5px trong trường hợp này) là quy tắc xác định "chiều rộng" máng xối. Tất nhiên, nếu bạn cần điều chỉnh màu sắc để phù hợp với nhu cầu của bạn. Đây cũng là một ví dụ nhỏ cho một đường ngang, sử dụng trái và phải để tạo đường thẳng đứng.

Tôi đã tạo một hàm javascript để tạo các dấu chấm với một svg. Bạn có thể điều chỉnh khoảng cách và kích thước dấu chấm trong mã 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>

NẾU bạn chỉ nhắm mục tiêu các trình duyệt hiện đại, VÀ bạn có thể có đường viền trên một phần tử riêng biệt với nội dung của mình, sau đó bạn có thể sử dụng biến đổi tỷ lệ CSS để có dấu chấm hoặc dấu gạch ngang lớn hơn:

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

Phải mất rất nhiều điều chỉnh vị trí để đưa nó vào hàng, nhưng nó hoạt động. Bằng cách thay đổi độ dày của đường viền, kích thước bắt đầu và hệ số tỷ lệ, bạn có thể đạt được tỷ lệ chiều dày bạn muốn. Điều duy nhất bạn không thể chạm vào là tỷ lệ 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>

đây là những gì tôi đã làm - sử dụng một hình ảnh nhập mô tả hình ảnh ở đây

AFAIK không có cách nào để làm điều này. Bạn có thể sử dụng đường viền nét đứt hoặc có thể tăng chiều rộng của đường viền lên một chút, nhưng chỉ cần có thêm các dấu chấm cách nhau là không thể với CSS.

Bạn có thể tạo một khung vẽ (thông qua javascript) và vẽ một đường chấm chấm bên trong. Trong khung vẽ, bạn có thể kiểm soát khoảng thời gian dấu gạch ngang và khoảng cách ở giữa.