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

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

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

Большие отличия: IE 11 / Firefox / Chrome

Граница IE 11Граница FirefoxГраница Chrome

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

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

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

Создайте собственную границу с помощью border-image

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

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

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

Пример целиПример цели с более широкими пробелами

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

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

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

Пример Border Image Background Blown Up

Это то, что похоже на масштабирование:

Пример изображения границы изображения Фактический размер

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

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

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

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

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

  1. Определите источник border-image :

     border-image-source:url("http://i.stack.imgur.com/wLdVc.png"); 
  2. Необязательно. Определите ширину frameworks :

     border-image-width: 1; 

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

  3. Определить срез-изображение-срез :

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

     border-image-slice: 2; 

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

    Пример фрагментов

  4. Определите повторение border-image :

    В этом примере мы хотим, чтобы шаблон повторялся равномерно вокруг нашего 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; } 
 
This is bordered!
This is bordered and has larger gaps!

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

Способ 1. Использование SVG

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

Плюсы:

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

Минусы:

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

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

  • Как разместить рекламу в lesscss
  • Строки равных высот в макете сетки CSS
  • Разница между дисплеем: inline-flex и display: flex
  • Почему селектор h3: nth-child (1): содержит ('a') работу?
  • Как удалить поле из каждого элемента, который является последним элементом в строке?
  • Форма треугольника с фоновым изображением
  • Менее агрессивные компиляции с CSS3 calc
  • Почему мы должны включать ttf, eot, woff, svg, ... в шрифт-face
  • CSS3 PIE - Предоставление поддержки пограничного радиуса IE не работает?
  • Как отменить анимацию на мыши после зависания
  • Прокладка-дно / верхняя часть в макете flexbox
  • Давайте будем гением компьютера.