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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Давайте создадим эти

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

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

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

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

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

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

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

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

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

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

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

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

2. Необязательно - Определите border-image-width :

   border-image-width: 1;
   

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

3. Определить border-image-slice :

   В этом примере толщина верхней, правой, нижней и левой границ изображений составляет 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>

Answer 2

В дополнение к свойству 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 равна nil.

.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 фоновых изображений и расположить их соответствующим образом, чтобы создать эффект пунктирной границы. Это также может быть сделано с 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 Shadows

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

Answer 3

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

Answer 4

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