Я использую пунктирную границу стиля в моей коробке, как
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}Я хочу увеличить расстояние между каждой точкой границы.
Я использую пунктирную границу стиля в моей коробке, как
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}Я хочу увеличить расстояние между каждой точкой границы.
Ответы:
Этот трюк работает как для горизонтальных, так и для вертикальных границ:
/*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 или посмотрите на пример фрагмента кода:
Вот трюк, который я использовал в недавнем проекте, чтобы достичь почти всего, что я хочу, с горизонтальными границами. Я использую <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*/
}Это также означает, что вы можете добавить тень текста к точкам, градиентам и т. Д. Все, что вы хотите ...
Ну, он отлично работает для горизонтальных границ. Если вам нужны вертикальные, вы можете указать класс для другого часа и использовать CSS3rotation свойство .
Вы не можете сделать это с чистым CSS - спецификация CSS3 даже имеет конкретную цитату по этому поводу:
Примечание: нет контроля ни расстояния между точками и тире, ни длины штрихов. Реализациям рекомендуется выбирать интервал, который делает углы симметричными.
Вы можете, однако, использовать или изображение границы или фоновое изображение, которое добивается цели.
border: dotted, но это можно сделать с помощью градиентов , как ответ Eagorajose показал , .
При этом используется стандартная граница CSS и псевдоэлемент + overflow: hidden. В этом примере вы получите три разные 2px пунктирные границы: обычные, с интервалом в 5px, с интервалом в 10px. На самом деле 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>Применение к маленьким элементам с большими закругленными углами может сделать некоторые забавные эффекты.
Итак, начиная с данного ответа и применяя тот факт, что 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% фонового тега показывает, насколько широкая черта на самом деле. Поэтому возможно иметь штрихи разной длины на каждой граничной стороне.
Посмотрите документы MDN для доступных значений для border-style:
- none: без рамки, устанавливает ширину на 0. Это значение по умолчанию.
- hidden: то же самое, что и none, за исключением случаев разрешения конфликтов границ для элементов таблицы.
- пунктир: серия коротких штрихов или отрезков.
- пунктир: серия точек.
- double: две прямые линии, которые в сумме составляют количество пикселей, определенное как border-width.
- паз: резной эффект.
- вставка: делает коробку встроенной.
- Начало: напротив «вставки». Делает коробку трехмерной (с тиснением).
- Гребень: напротив "канавки". Граница появляется 3D (выходит).
- сплошная: прямая, сплошная линия.
Помимо этих вариантов, невозможно повлиять на стиль стандартной границы.
Если возможности там вам не по вкусу, вы можете использовать CSS3, border-imageно учтите, что поддержка браузеров для этого все еще не очень удобна.
Построение 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>Это старая, но все еще очень актуальная тема. Топовой ответ работает хорошо, но только для очень маленьких точек. Как уже отмечал Бходжна Раунияр в комментариях, для более крупных (> 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Должны соответствовать этим.
Две остановки определены так, чтобы точка была красивой и гладкой: сплошной черный для половины радиуса и затем градиент для полного радиуса.
Это действительно старый вопрос, но он имеет высокий рейтинг в Google, поэтому я добавлю свой метод, который может работать в зависимости от ваших потребностей.
В моем случае я хотел получить толстую пунктирную границу с минимальным разрывом между штрихами. Я использовал генератор шаблонов CSS (например, http://www.patternify.com/ ), чтобы создать шаблон шириной 10 на 1 пиксель. 9px - сплошной штрих, 1px - белый.
В моем CSS я включил этот шаблон в качестве фонового изображения, а затем увеличил его, используя атрибут background-size. Я закончил с повторением 20px на 2px, 18px из которых было сплошной линией и 2px белым. Вы могли бы увеличить его еще больше для действительно толстой пунктирной линии.
Хорошая вещь заключается в том, что изображение закодировано как данные, у вас нет дополнительного внешнего HTTP-запроса, так что нет проблем с производительностью. Я сохранил свое изображение как переменную SASS, чтобы использовать его на своем сайте.
Краткий ответ: вы не можете.
Вам придется использовать border-imageсобственность и несколько изображений.
Так много людей говорят: «Ты не можешь». Да, ты можешь. Это правда, что не существует правила css для контроля промежутка между штрихами, но у 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) - это правило, которое определяет «ширину» желоба. Конечно, вам нужно настроить цвета в соответствии с вашими потребностями. Это также небольшой пример для горизонтальной линии, используйте левую и правую, чтобы сделать вертикальную линию.
Я сделал функцию JavaScript для создания точек с SVG. Вы можете настроить расстояние между точками и размер в коде JavaScript.
var make_dotted_borders = function() {
// EDIT THESE SETTINGS:
var spacing = 8;
var dot_width = 2;
var dot_height = 2;
//---------------------
var dotteds = document.getElementsByClassName("dotted");
for (var i = 0; i < dotteds.length; i++) {
var width = dotteds[i].clientWidth + 1.5;
var height = dotteds[i].clientHeight;
var horizontal_count = Math.floor(width / spacing);
var h_spacing_percent = 100 / horizontal_count;
var h_subtraction_percent = ((dot_width / 2) / width) * 100;
var vertical_count = Math.floor(height / spacing);
var v_spacing_percent = 100 / vertical_count;
var v_subtraction_percent = ((dot_height / 2) / height) * 100;
var dot_container = document.createElement("div");
dot_container.classList.add("dot_container");
dot_container.style.display = getComputedStyle(dotteds[i], null).display;
var clone = dotteds[i].cloneNode(true);
dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
dot_container.appendChild(clone);
for (var x = 0; x < horizontal_count; x++) {
// The Top Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
dot.style.left = left_percent + "%";
dot.style.top = (-dot_height / 2) + "px";
dot_container.appendChild(dot);
// The Bottom Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
dot.style.top = height - (dot_height / 2) + "px";
dot_container.appendChild(dot);
}
for (var y = 1; y < vertical_count; y++) {
// The Left Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (-dot_width / 2) + "px";
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
dot_container.appendChild(dot);
}
for (var y = 0; y < vertical_count + 1; y++) {
// The Right Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = width - (dot_width / 2) + "px";
if (y < vertical_count) {
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
}
else {
dot.style.top = height - (dot_height / 2) + "px";
}
dot_container.appendChild(dot);
}
}
}
make_dotted_borders();div.dotted {
display: inline-block;
padding: 0.5em;
}
div.dot_container {
position: relative;
margin-left: 0.25em;
margin-right: 0.25em;
}
div.dot {
position: absolute;
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}<div class="dotted">Lorem Ipsum</div>Если вы ориентируетесь только на современные браузеры, И вы можете иметь свою границу на отдельном элементе от вашего контента, тогда вы можете использовать масштабное преобразование CSS, чтобы получить большую точку или тире:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);Требуется много настроек позиционирования, чтобы выстроиться в линию, но это работает. Изменяя толщину границы, начальный размер и масштабный коэффициент, вы можете получить примерно необходимое соотношение толщины к длине. Единственное, чего вы не можете коснуться - это соотношение тире к разрыву.
scale(8)
<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;"> </div>это то, что я сделал - используйте изображение введите описание изображения здесь
Вы можете создать холст (с помощью JavaScript) и нарисовать пунктирную линию внутри. В пределах холста вы можете контролировать длину черты и промежуток между ними.