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

Question

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

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

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

Answer 1

Этот трюк работает как для горизонтальных, так и для вертикальных границ:

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

Answer 2

Вот трюк, который я использовал в недавнем проекте, чтобы достичь почти всего, что я хочу, с горизонтальными границами. Я использую <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*/
}

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

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

Answer 3

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

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

Однако вы можете использовать либо border-image , либо фоновое изображение, которое помогает.

Answer 4

Используется стандартная граница 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>

Применение к маленьким элементам с большими закругленными углами может вызвать некоторые забавные эффекты.

Answer 5

См. MDN документы для доступных значений для border-style:

• нет: нет границы, устанавливает ширину на 0. Это значение по умолчанию.
• скрыто: То же, что и «нет», за исключением случаев разрешения конфликтов границ для элементов таблицы.
• пунктир: серия коротких штрихов или отрезков.
• пунктир: серия точек.
• double: две прямые линии, которые складываются в количество пикселей, определенное как border-width.
• канавка: резной эффект.
• inset: поле выглядит встроенным.
• outset: напротив 'inset'.Делает коробку трехмерной (с тиснением).
• хребет: напротив «канавки».Граница появляется 3D (выходит).
• сплошная: прямая, сплошная линия.

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

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

Answer 6

Итак, начиная с данного ответа и применяя тот факт, что 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>

Стоит отметить, что размер фона в 10 пикселей дает область, которая будет покрывать штрих и пробел. 50% фонового тега показывает, насколько широкая черта на самом деле. Поэтому возможно иметь штрихи разной длины на каждой граничной стороне.

Answer 7

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

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

В моем CSS я включил этот шаблон в качестве фонового изображения, а затем увеличил его, используя атрибут background-size. Я закончил с повторением 20px на 2px, 18px из которых было сплошной линией и 2px белым. Вы могли бы увеличить его еще больше для действительно толстой пунктирной линии.

Приятно то, что изображение закодировано в виде данных, у вас нет дополнительного внешнего HTTP-запроса, так что нет проблем с производительностью. Я сохранил свое изображение как переменную SASS, чтобы использовать его на своем сайте.

Answer 8

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

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

Answer 9

Построение 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>

Answer 10

Так много людей говорят: «Ты не можешь». Да, ты можешь. Это правда, что не существует правила 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%;
}

По сути, высота верхней границы (в данном случае 5 пикселей) - это правило, которое определяет «ширину» желоба. OЕсли вам нужно будет настроить цвета в соответствии с вашими потребностями. Это также небольшой пример для горизонтальной линии, используйте левую и правую, чтобы сделать вертикальную линию.