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

Этот пример ниже отображается по-разному в разных браузерах:

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

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

Большие различия: IE 11 / Firefox / Chrome

Существуют ли какие-либо методы, позволяющие лучше контролировать появление пунктирных границ?

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

Исходное значение свойства пунктирной границы не предлагает управления самими пунктирными линиями ... так что используйте border-imageсвойство!

Заварите свою собственную границу с border-image

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

Создадим эти

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

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

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

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

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

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

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

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

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

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

1. Определите источник изображения границы :

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

2. Необязательно - Определите ширину изображения границы :

   border-image-width: 1;

   Значение по умолчанию - 1. Его также можно установить с помощью значения пикселя, процентного значения или другого кратного значения (1x, 2x, 3x и т. Д.). Это отменяет любой border-widthнабор.

3. Определите срез изображения границы :

   В этом примере толщина верхней, правой, нижней и левой границ изображений составляет 2 пикселя, и за их пределами нет зазора, поэтому значение нашего среза равно 2:

   border-image-slice: 2; 

   Срезы выглядят следующим образом: 2 пикселя сверху, справа, снизу и слева:

   

4. Определите 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>

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

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

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

Плюсы:

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

Минусы:

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

Метод 2: Использование градиентов

Мы можем использовать несколько linear-gradientфоновых изображений и расположить их соответствующим образом, чтобы создать эффект пунктирной границы. Это также можно сделать с помощью a, repeating-linear-gradientно особого улучшения не происходит из-за использования повторяющегося градиента, поскольку нам нужно, чтобы каждый градиент повторялся только в одном направлении.

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

Плюсы:

1. Масштабируемость и возможность адаптации, даже если размеры контейнера динамические.
2. Не использует никаких дополнительных псевдоэлементов, что означает, что они могут быть отложены для любого другого потенциального использования.

Минусы:

1. Браузер поддерживает линейные градиенты сравнительно меньше, и это не проблема, если вы хотите поддерживать IE 9-. Даже библиотеки, такие как CSS3 PIE, не поддерживают создание шаблонов градиента в IE8-.
2. Невозможно использовать, когда border-radiusзадействовано, потому что фон не изгибается на основе border-radius. Вместо этого они обрезаются.

Метод 3: Тени коробки

Мы можем создать небольшую полосу (в форме тире), используя псевдоэлементы, а затем создать несколько ее box-shadowверсий, чтобы создать границу, как в приведенном ниже фрагменте.

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

Плюсы:

1. Размеры тире можно контролировать, изменяя размеры псевдоэлемента. Интервал можно контролировать, изменяя расстояние между каждой тенью.
2. Уникальный эффект можно получить, добавив разные цвета для каждой тени блока.

Минусы:

1. Поскольку мы должны вручную установить размеры тире и интервал, этот подход бесполезен, когда размеры родительского блока являются динамическими.
2. IE8 и ниже не поддерживают тень блока . Однако это можно преодолеть с помощью таких библиотек, как CSS3 PIE.
3. Может использоваться с, border-radiusно их расположение было бы очень сложным, поскольку приходилось находить точки на окружности (и, возможно, даже transform).

.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}

<div class='dashed-box-shadow'>Some content</div>

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

Там очень крутой инструмент сделал @kovart называется пунктирная граница генератора .

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

Затем вы могли бы просто использовать его как свойство фона в вашем элементе вместо границы:

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

Длина штриха зависит от ширины штриха. Вы можете увеличить длину, увеличив ширину, и скрыть часть границы внутренним элементом.

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
}

https://jsfiddle.net/ok6srt2z/

У меня совсем недавно была такая же проблема.

Мне удалось решить эту проблему с двумя абсолютно позиционированными div, несущими границу (один для горизонтального и один для вертикального), а затем преобразовав их. Внешний бокс просто нужно расположить относительно друг друга.

<div class="relative">
    <div class="absolute absolute--fill overflow-hidden">
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 4px 0px 4px 0px;
                transform: scaleX(2);
        "></div>
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 0px 4px 0px 4px;
                transform: scaleY(2);
        "></div>
    </div>

    <div> {{Box content goes here}} </div>
</div>

Примечание: в этом примере я использовал тахионы, но я думаю, что классы не требуют пояснений.

Это создаст оранжево-серую границу, используя class = "myclass" в div.

.myclass {
    outline:dashed darkorange  12px;
    border:solid slategray  14px;
    outline-offset:-14px;
}