Чи можна контролювати довжину та відстань між штриховими штрихами в CSS?

Цей приклад нижче відображається по-різному між браузерами:

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

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

Великі відмінності: 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 з прозорістю.

Ось як виглядає у фотошопі при збільшенні:

Ось як виглядає масштаб:

Контроль зазору та довжини ходу

Щоб створити більш широкі / короткі проміжки або штрихи, розширити / скоротити прогалини або штрихи на зображенні.

Ось зображення із ширшими пробілами в 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. Визнач повторне зображення-зображення :

   У цьому прикладі ми хочемо, щоб шаблон повторювався рівномірно навколо нашого діва. Тож ми обираємо:

   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>

Окрім 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.

.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-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>

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

Є класний інструмент, створений компанією @kovart, який називається генератором пунктирних меж .

Він використовує svg як фонове зображення, щоб дозволити встановити бажаний масив штрихових штрихів, і це досить зручно.

Потім ви просто використовуватимете його як фонове властивість на своєму елементі замість межі:

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

Довжина ходу залежить від ширини ходу. Ви можете збільшити довжину, збільшивши ширину і приховавши частину бордюру внутрішнім елементом.

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
}

https://jsfiddle.net/ok6srt2z/

У мене нещодавно була та сама проблема.

Мені вдалося вирішити це за допомогою двох абсолютно розташованих дівок, що переносять кордон (один для горизонтального та один для вертикального), а потім їх перетворення. Зовнішній ящик просто повинен бути розташований відносно.

<div class="relative">
    <div class="absolute absolute--fill overflow-hidden">
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 4px 0px 4px 0px;
                transform: scaleX(2);
        "></div>
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 0px 4px 0px 4px;
                transform: scaleY(2);
        "></div>
    </div>

    <div> {{Box content goes here}} </div>
</div>

Примітка: я використовував тахіони в цьому прикладі, але я здогадуюсь, що заняття є своєрідними поясненнями.

Це зробить помаранчеву та сіру межу за допомогою класу = "myclass" у діві.

.myclass {
    outline:dashed darkorange  12px;
    border:solid slategray  14px;
    outline-offset:-14px;
}