Исходное значение свойства пунктирной границы не предлагает управления самими пунктирными линиями ... так что используйте border-image
свойство!
Заварите свою собственную границу с border-image
Совместимость : он предлагает отличную поддержку браузера (IE 11 и все современные браузеры). Обычную рамку можно установить в качестве альтернативы для старых браузеров.
Создадим эти
Эти границы будут отображаться в одном и том же кросс-браузере!
Шаг 1 - Создайте подходящий образ
Этот пример имеет ширину 15 пикселей на высоту 15 пикселей, а ширина зазоров в настоящее время составляет 5 пикселей. Это прозрачный файл .png.
Вот как это выглядит в фотошопе при увеличении:
Вот как это выглядит в масштабе:
Контроль зазора и длины хода
Чтобы создать более широкие / короткие промежутки или штрихи, увеличивайте / сокращайте промежутки или штрихи в изображении.
Вот изображение с более широкими промежутками в 10 пикселей:
правильно масштабировано =
Шаг 2 - Создайте CSS - для этого примера требуется 4 основных шага
Определите источник изображения границы :
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
Необязательно - Определите ширину изображения границы :
border-image-width: 1;
Значение по умолчанию - 1. Его также можно установить с помощью значения пикселя, процентного значения или другого кратного значения (1x, 2x, 3x и т. Д.). Это отменяет любой border-width
набор.
Определите срез изображения границы :
В этом примере толщина верхней, правой, нижней и левой границ изображений составляет 2 пикселя, и за их пределами нет зазора, поэтому значение нашего среза равно 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>
border-style: solid
(или что-то подобное), если вы опускаете откат.В дополнение к
border-image
свойству существует несколько других способов создания пунктирной границы с контролем длины штриха и расстояния между ними. Они описаны ниже:Метод 1: использование SVG
Мы можем создать пунктирную границу, используя элемент
path
илиpolygon
элемент и задавstroke-dasharray
свойство. Свойство принимает два параметра, один из которых определяет размер тире, а другой - расстояние между ними.Плюсы:
border-radius
задействованный. Мы бы просто заменитьpath
сcircle
как в этом ответе (или) преобразоватьpath
в круг.Минусы:
vector-effect='non-scaling-stroke'
(как во втором поле), но поддержка этого свойства браузером в IE равна нулю.Показать фрагмент кода
Метод 2: Использование градиентов
Мы можем использовать несколько
linear-gradient
фоновых изображений и расположить их соответствующим образом, чтобы создать эффект пунктирной границы. Это также можно сделать с помощью a,repeating-linear-gradient
но особого улучшения не происходит из-за использования повторяющегося градиента, поскольку нам нужно, чтобы каждый градиент повторялся только в одном направлении.Показать фрагмент кода
Плюсы:
Минусы:
border-radius
задействовано, потому что фон не изгибается на основеborder-radius
. Вместо этого они обрезаются.Метод 3: Тени коробки
Мы можем создать небольшую полосу (в форме тире), используя псевдоэлементы, а затем создать несколько ее
box-shadow
версий, чтобы создать границу, как в приведенном ниже фрагменте.Если тире имеет квадратную форму, то одного псевдоэлемента будет достаточно, но если это прямоугольник, нам понадобится один псевдоэлемент для верхней + нижней границ и другой для левой + правой границ. Это связано с тем, что высота и ширина черточки на верхней границе будут отличаться от левой.
Плюсы:
Минусы:
border-radius
но их расположение было бы очень сложным, поскольку приходилось находить точки на окружности (и, возможно, дажеtransform
).Показать фрагмент кода
источник
pointer-events:none
в svg inorder, чтобы иметь возможность взаимодействовать с контентом.Короткий: Нет, это не так. Вместо этого вам придется работать с изображениями.
источник
Там очень крутой инструмент сделал @kovart называется пунктирная граница генератора .
Он использует svg в качестве фонового изображения, чтобы можно было установить желаемый массив штрихов, и это довольно удобно.
Затем вы могли бы просто использовать его как свойство фона в вашем элементе вместо границы:
источник
Длина штриха зависит от ширины штриха. Вы можете увеличить длину, увеличив ширину, и скрыть часть границы внутренним элементом.
https://jsfiddle.net/ok6srt2z/
источник
pointer-events: none
чтобы предотвратить проблему наложения.У меня совсем недавно была такая же проблема.
Мне удалось решить эту проблему с двумя абсолютно позиционированными div, несущими границу (один для горизонтального и один для вертикального), а затем преобразовав их. Внешний бокс просто нужно расположить относительно друг друга.
Примечание: в этом примере я использовал тахионы, но я думаю, что классы не требуют пояснений.
источник
Это создаст оранжево-серую границу, используя class = "myclass" в div.
источник