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

Question

Я использую пунктирную границу стиля в своем поле, как

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

Я хочу увеличить расстояние между каждой точкой границы.

Answer 1

Если вы ориентируетесь только на современные браузеры, И вы можете иметь свою границу на отдельном элементе от вашего контента, тогда вы можете использовать масштабное преобразование CSS, чтобы получить большую точку или тире:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

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

Answer 2

Краткий ответ: Вы не можете.

Вам нужно будет использовать border-image свойство и несколько изображений.

Answer 3

<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

это то, что я сделал - используйте изображение введите описание изображения здесь

Answer 4

Вы можете создать холст (через JavaScript) и нарисовать пунктирную линию внутри.В пределах холста вы можете контролировать длину черты и расстояние между ними.

Answer 5

AFAIK нет способа сделать это.Вы можете использовать пунктирную границу или немного увеличить ширину границы, но просто получить больше разнесенных точек невозможно с помощью CSS.