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

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

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

Answer 2

Значение свойства native пунктирная граница не обеспечивает контроль над самими штрихами...так что включайте border-image собственность!

Приготовьте свой собственный бордюр с border-image

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

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

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

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

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

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

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

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

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

Вот изображение с более широкими промежутками в 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. Определите граница-изображение-повтор:

   В этом примере мы хотим, чтобы шаблон равномерно повторялся вокруг нашего div.Итак, мы выбираем:

   border-image-repeat: round;
   

Написание стенографии

Приведенные выше свойства могут быть заданы индивидуально или сокращенно с помощью граница-изображение:

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 3

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

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

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

Плюсы:

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

Минусы:

1. Когда размеры контейнера не изменяются пропорционально, пути обычно масштабируются в результате изменения размера тире и пространства между ними (постарайтесь парить на первом поле в фрагмент). Это можно контролировать, добавив vector-effect='non-scaling-stroke' (как во второй коробке), но поддержка браузера для этого свойства является Nil в 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 Фоновые изображения и позиционируйте их надлежащим образом, чтобы создать эффект распределенного границы. Это также может быть сделано с 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, не поддерживают создание градиентных узоров в IE8-.
2. Не может быть использован, когда border-radius участвует, потому что фоны не кривая на основе border-radius. Отказ Они обрезают вместо этого.

---

Способ 3: коробка теней

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

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

Плюсы:

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

Минусы:

1. Поскольку мы должны вручную установить размеры тире и расстояния, этот подход не является хорошим, когда размеры родительской коробки динамичны.
2. IE8 и ниже не Поддержка коробки тень. Отказ Однако это можно преодолеть с помощью библиотек, таких как пирог CSS3.
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 4

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