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

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

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

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

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

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

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

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

• none: нет границы, устанавливает ширину в 0. Это значение по умолчанию.
• hidden: То же, что и "none", за исключением разрешение пограничного конфликта для таблицы элементы.
• пунктир: серия коротких тире или сегментов линии.
• пунктир: Серия точек.
• double: две прямые строки, которые суммируются с количеством пикселей определяемой как ширина границы.
• паз: Резной эффект.
• Вставка: создает окно появляются встроенные.
• начало: Напротив "Вставка". Делает поле отображаемым 3D (С тиснением).
• хребет: Напротив "Канавка". Граница появляется 3D (выходит).
• solid: Single, прямая, сплошная линия.

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

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

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

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

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

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

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

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

Поэтому, начиная с полученного ответа и применяя тот факт, что 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% фонового тега - это то, насколько широка черта. Таким образом, на каждой граничной стороне возможно иметь различную длину.

Так много людей говорят: "Ты не можешь". Да, ты можешь. Это правда, что не существует правила 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) является правилом, определяющим ширину желоба. Конечно, вам нужно будет настроить цвета в соответствии с вашими потребностями. Это также небольшой пример для горизонтальной линии, используйте влево и вправо, чтобы сделать вертикальную линию.

ЕСЛИ вы ориентируетесь только на современные браузеры, и вы можете иметь свою границу на отдельном элементе из вашего контента, тогда вы можете использовать масштаб масштабирования CSS, чтобы получить большую точку или тире:

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

Требуется много позиционной настройки, чтобы заставить его выстраиваться в линию, но он работает. Изменяя толщину границы, начальный размер и масштабный коэффициент, вы можете получить примерно необходимое соотношение длины и толщины. Единственное, что вы не можете коснуться, - это соотношение "тире к зазору".

Короткий ответ: вы не можете.

Вам нужно будет использовать свойство border-image и несколько изображений.

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

AFAIK нет способа сделать это. Вы можете использовать пунктирную границу или, возможно, немного увеличить ширину границы, но простое использование точек с расширенными точками невозможно с помощью CSS.