it-swarm.com.ru

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

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

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

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

240
Kali Charan Rajput

Этот трюк работает как для горизонтальных, так и для вертикальных границ: 

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

Вы можете настроить размер с помощью background-size, а пропорции - с процентами линейного градиента. В этом примере у меня есть пунктирная линия с 1px точками и интервалом 2px . Таким образом, вы также можете иметь несколько пунктирных границ, используя несколько фонов.

Попробуйте это в этом JSFiddle или взгляните на пример фрагмента кода:

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}
<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

356
Eagorajose

Вот трюк, который я использовал в недавнем проекте, чтобы достичь почти всего, что я хочу, с горизонтальными границами. Я использую <hr/> каждый раз, когда мне нужна горизонтальная граница. Основной способ добавить границу к этому часу что-то вроде

 hr {border-bottom: 1px dotted #000;}

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

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

И далее вы создаете свою границу (вот пример с точками)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

Это также означает, что вы можете добавить текстовую тень к точкам, градиентам и т.д. Все, что вы хотите ...

Ну, он отлично работает для горизонтальных границ. Если вам нужны вертикальные, вы можете указать класс для другого часа и использовать свойство CSS3 rotation.

136
Matt

Вы не можете сделать это с чистым CSS - спецификация CSS3 даже содержит конкретную цитату по этому поводу:

Примечание: нет контроля ни расстояния между точками и тире, ни длины штрихов. Реализациям рекомендуется выбирать интервал, который делает углы симметричными.

Вы можете, однако, использовать либо изображение границы или фоновое изображение, которое помогает.

116
Shadikka

Смотрите MDN docs для доступных значений для border-style:

  • none: нет границы, устанавливает ширину 0 . Это значение по умолчанию. 
  • скрыто: То же, что и «нет», за исключением разрешение пограничных конфликтов для таблицы элементы. 
  • пунктирная: серия короткая тире или отрезки. 
  • пунктирный : Серия точек. 
  • двойной: два прямых строки, которые складываются в количество пикселей определяется как border-width. 
  • паз: Резной эффект. 
  • вставка: делает поле появляются встроенные. 
  • начало: напротив «Вставка». Делает окно появится 3D (С тиснением). 
  • гребень: напротив «Канавка». Граница появляется 3D (выходит). 
  • сплошной: одинарный, прямая сплошная линия.

Помимо этих вариантов, невозможно повлиять на стиль стандартной границы.

Если возможности вам не нравятся, вы могли бы использовать CSS3 border-image , но учтите, что поддержка браузером для этого все еще очень нестабильна.

17
Pekka 웃

При этом используются стандартная CSS-граница и псевдоэлемент + overflow: hidden . В этом примере вы получаете три разные 2-пиксельные пунктирные границы: обычные, с интервалом 5 пикселей, с интервалом 10 пикселей. На самом деле 10px с видимым только 10-8 = 2px.

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

Применение к маленьким элементам с большими закругленными углами может сделать некоторые забавные эффекты.

16
lenioia

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

В моем случае я хотел толстую пунктирную границу с минимальным разрывом между штрихами. Я использовал генератор шаблонов CSS (например, этот: http://www.patternify.com/ ), чтобы создать шаблон шириной 10px и 1px. 9px - сплошной штрих, 1px - белый.

В моем CSS я включил этот шаблон в качестве фонового изображения, а затем увеличил его, используя атрибут background-size. Я закончил с повторением 20px на 2px, 18px из которых было сплошной линией и 2px белым. Вы могли бы увеличить его еще больше для действительно толстой пунктирной линии.

Хорошая вещь в том, что изображение закодировано как данные, у вас нет дополнительного внешнего HTTP-запроса, так что нет проблем с производительностью. Я сохранил свое изображение как переменную SASS, чтобы использовать его на своем сайте.

6
Nick Angiolillo

Итак, начиная с данного ответа и применяя тот факт, что CSS3 допускает несколько настроек - приведенный ниже код полезен для создания полного блока:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}
<div id="border">
  bordered area
</div>

Стоит отметить, что 10px в фоновом размере дает область, которую будут покрывать штрих и пробел. 50% фонового тега показывает, насколько широкая черта на самом деле. Поэтому возможно иметь штрихи разной длины на каждой граничной стороне.

5
Ukuser32

Так много людей говорят: «Ты не можешь». Да, ты можешь. Это правда, что не существует правила css для управления пространством Gutter между штрихами, но у css есть и другие возможности. Не спешите говорить, что ничего нельзя сделать.

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

По сути, высота верхней границы (в данном случае 5px) - это правило, которое определяет «ширину» желоба. OЕсли вам нужно будет настроить цвета в соответствии с вашими потребностями. Это также небольшой пример для горизонтальной линии, используйте левую и правую, чтобы сделать вертикальную линию.

2
devinfd

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

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

2
Crozin

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

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

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

2
Dave

Это старая, но все еще очень актуальная тема. текущий топовый ответ работает хорошо, но только для очень маленьких точек. Как уже указывал Бохендра Раунияр в комментариях, для более крупных (> 2px) точек точки выглядят квадратными, а не круглыми. Я нашел эту страницу в поисках разделенных точек, а не разделенных квадратов (или даже тире, как некоторые ответы здесь используют).

Основываясь на этом, я использовал radial-gradient. Также, используя ответ от Ukuser32 , точечные свойства можно легко повторить для всех четырех границ. Только углы не идеальны.

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}
<div>Some content with round, spaced dots as border</div>

radial-gradientожидает :

  • форма и необязательно положение
  • две или более остановки: цвет и радиус

Здесь я хотел получить точку диаметром 5 пикселей (радиус 2,5 пикселя), в 2 раза больше диаметра (10 пикселей) между точками, добавив до 15 пикселей. background-size должен соответствовать этим.

Две остановки определены так, чтобы точка была хорошей и гладкой: сплошной черный для половины радиуса, а затем градиент для полного радиуса.

1
Marten Koetsier

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

0
velop

Построение 4-х краевого решения на основе ответа @ Eagorajose с сокращенным синтаксисом:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}
<div id="page"></div>

0
Aleksander Stelmaczonek

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

0
Bojangles
<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>

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

0
Christine Nicole Yu