Управление штриховой длиной штриха и расстоянием между штрихами

Можно ли управлять длиной и расстоянием между штриховыми штрихами штриха в CSS?

В этом примере ниже отображаются разные браузеры:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

<div>I have a dashed border!</div>

Ответ 1

Css-рендеринг является специфичным для браузера, и я не знаю никакой тонкой настройки на нем, вы должны работать с изображениями, как рекомендовал Ham. Ссылка: http://www.w3.org/TR/CSS2/box.html#border-style-properties

Ответ 2

Собственное свойство свойства штриховой границы не обеспечивает контроль над тире себя... так что принесите свойство border-image!

Brew ваша собственная граница с `border-image`

Совместимость. Он предлагает отличную поддержку браузера (IE 11 и все современные браузеры). Нормальную границу можно установить как резерв для старых браузеров.

Создайте эти

Эти границы будут отображать точно такой же кросс-браузер!

Шаг 1 - Создайте подходящее изображение

Этот пример имеет высоту 15 пикселей и высоту 15 пикселей, а промежутки в настоящее время - 5 пикселей. Это .png с прозрачностью.

Вот как это выглядит в Photoshop при увеличении:

Вот как выглядит масштабирование:

Контроль зазора и длины хода

Чтобы создать более широкие/короткие промежутки или штрихи, увеличьте/сократите пробелы или штрихи изображения.

Вот изображение с более широкими 10px пробелами:

правильно масштабируется =

Шаг 2 - Создайте CSS — этот пример требует 4 основных шага

Определите border-image-source:

border-image-source:url("http://i.stack.imgur.com/wLdVc.png");

Необязательный. Определите border-image-width:
```
border-image-width: 1;
```
Значение по умолчанию равно 1. Оно также может быть задано с использованием значения пикселя, процентного значения или другого числа (1x, 2x, 3x и т.д.). Это переопределяет любой набор border-width.
Определите border-image-slice:

В этом примере толщина изображений верхней, правой, нижней и левой границ составляет 2px, и за пределами их нет зазора, поэтому наше значение среза равно 2:
```
border-image-slice: 2; 
```
Слайсы выглядят так: 2 пикселя сверху, справа, снизу и слева:
Определите border-image-repeat:

В этом примере мы хотим, чтобы шаблон повторялся равномерно вокруг нашего div. Поэтому мы выбираем:
```
border-image-repeat: round;
```

Сокращение текста

Указанные выше свойства могут быть заданы индивидуально или сокращенно, используя border-image:

border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;

Полный пример

Обратите внимание на резерв border: dashed 4px #000. Неограниченные браузеры получат эту границу.

.bordered {
  display: inline-block;
  padding: 20px;
  /* Fallback dashed border
     - the 4px width here is overwritten with the border-image-width (if set)
     - the border-image-width can be omitted below if it is the same as the 4px here
  */
  border: dashed 4px #000;
  
  /* Individual border image properties */
  border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;  
  
  /* or use the shorthand border-image */
  border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/
.largeGaps {
  border-image-source: url("http://i.stack.imgur.com/LKclP.png");
  margin: 0 20px;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>

Ответ 3

В дополнение к свойству border-image существует несколько других способов создания пунктирной границы с контролем над длиной штриха и расстоянием между ними. Они описаны ниже:

Метод 1: Использование SVG

Мы можем создать пунктирную границу с помощью элемента path или polygon и установить свойство stroke-dasharray. Свойство принимает два параметра, в которых один определяет размер тире, а другой определяет пространство между ними.

Плюсы:

SVG по своей природе являются масштабируемой графикой и могут адаптироваться к любым размерам контейнера.
Может работать очень хорошо, даже если есть border-radius. Мы просто заменили бы path на circle, как в этом ответе (или) преобразовали path в круг.
Поддержка браузера для SVG довольно хороша, и резервное копирование может быть предоставлено с использованием VML для IE8.

Минусы:

Когда размеры контейнера не изменяются пропорционально, пути имеют тенденцию к масштабированию, что приводит к изменению размера тире и пространства между ними (попробуйте навести курсор на первое поле в фрагменте). Это можно контролировать, добавив vector-effect='non-scaling-stroke' (как во втором поле), но поддержка браузера для этого свойства равна нулю в IE.

.dashed-vector {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
path{
  fill: none;
  stroke: blue;
  stroke-width: 5;
  stroke-dasharray: 10, 10;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
}


/* just for demo */

div{
  margin-bottom: 10px;
  transition: all 1s;
}
div:hover{
  height: 100px;
  width: 400px;
}

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

Ответ 4

Короткий: Нет, нет. Вам придется работать с изображениями.