Как увеличить расстояние между точками пунктирной границы

Я использую пунктирную границу стиля в моей коробке, как

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

Вы можете настроить размер с помощью background-size, а пропорции - с процентами линейного градиента. В этом примере у меня пунктирная линия с 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 {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*/
}

Это также означает, что вы можете добавить тень текста к точкам, градиентам и т. Д. Все, что вы хотите ...

Ну, он отлично работает для горизонтальных границ. Если вам нужны вертикальные, вы можете указать класс для другого часа и использовать CSS3rotation свойство .

Вы не можете сделать это с чистым CSS - спецификация CSS3 даже имеет конкретную цитату по этому поводу:

Примечание: нет контроля ни расстояния между точками и тире, ни длины штрихов. Реализациям рекомендуется выбирать интервал, который делает углы симметричными.

Вы можете, однако, использовать или изображение границы или фоновое изображение, которое добивается цели.

При этом используется стандартная граница CSS и псевдоэлемент + overflow: hidden. В этом примере вы получите три разные 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. Это значение по умолчанию.
• hidden: то же самое, что и none, за исключением случаев разрешения конфликтов границ для элементов таблицы.
• пунктир: серия коротких штрихов или отрезков.
• пунктир: серия точек.
• double: две прямые линии, которые в сумме составляют количество пикселей, определенное как border-width.
• паз: резной эффект.
• вставка: делает коробку встроенной.
• Начало: напротив «вставки». Делает коробку трехмерной (с тиснением).
• Гребень: напротив "канавки". Граница появляется 3D (выходит).
• сплошная: прямая, сплошная линия.

Помимо этих вариантов, невозможно повлиять на стиль стандартной границы.

Если возможности там вам не по вкусу, вы можете использовать CSS3, border-imageно учтите, что поддержка браузеров для этого все еще не очень удобна.

Построение 4-х краевого решения на основе ответа @ 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>

Это старая, но все еще очень актуальная тема. Топовой ответ работает хорошо, но только для очень маленьких точек. Как уже отмечал Бходжна Раунияр в комментариях, для более крупных (> 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,5 пикселя), в 2 раза больше диаметра (10 пикселей) между точками, добавив до 15 пикселей. background-sizeДолжны соответствовать этим.

Две остановки определены так, чтобы точка была красивой и гладкой: сплошной черный для половины радиуса и затем градиент для полного радиуса.

Это действительно старый вопрос, но он имеет высокий рейтинг в Google, поэтому я добавлю свой метод, который может работать в зависимости от ваших потребностей.

В моем случае я хотел получить толстую пунктирную границу с минимальным разрывом между штрихами. Я использовал генератор шаблонов CSS (например, http://www.patternify.com/ ), чтобы создать шаблон шириной 10 на 1 пиксель. 9px - сплошной штрих, 1px - белый.

В моем CSS я включил этот шаблон в качестве фонового изображения, а затем увеличил его, используя атрибут background-size. Я закончил с повторением 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) - это правило, которое определяет «ширину» желоба. Конечно, вам нужно настроить цвета в соответствии с вашими потребностями. Это также небольшой пример для горизонтальной линии, используйте левую и правую, чтобы сделать вертикальную линию.

Я сделал функцию JavaScript для создания точек с SVG. Вы можете настроить расстояние между точками и размер в коде 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>

Если вы ориентируетесь только на современные браузеры, И вы можете иметь свою границу на отдельном элементе от вашего контента, тогда вы можете использовать масштабное преобразование 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.

Вы можете создать холст (с помощью JavaScript) и нарисовать пунктирную линию внутри. В пределах холста вы можете контролировать длину черты и промежуток между ними.