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

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

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

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}
<div>I have a dashed border!</div>

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

IE 11 borderFirefox BorderChrome border

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

+82
источник поделиться
4 ответа

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

+17
источник

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

Brew ваша собственная граница с border-image

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

Создайте эти

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

Goal exampleGoal example with wider gaps

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

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

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

Example Border Image Background Blown Up

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

Example Border Image Background Actual Size

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

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

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

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

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

  • Определите border-image-source:

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

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

    border-image-width: 1;

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

  • Определите border-image-slice:

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

    border-image-slice: 2;

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

    Slices example

  • Определите 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>
+105
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

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

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

Плюсы:

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

Минусы:

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

Плюсы:

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

Минусы:

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

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

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

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

Плюсы:

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

Минусы:

  • Поскольку мы должны вручную устанавливать размеры тире и интервала, этот подход не подходит, когда размеры родительского блока являются динамическими.
  • IE8 и ниже не поддержка теневого окна. Однако это можно преодолеть, используя библиотеки, такие как CSS3 PIE.
  • Может использоваться с 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>
+61
источник

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

+18
источник

Посмотрите другие вопросы по меткам или Задайте вопрос