Я использую пунктирной границы стиля в мой ящик
.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;
Вы можете отрегулировать размер с фоном-размер и пропорции с линейно-градиентная проценты. В этом примере у меня есть пунктирная линия в 1px точек и интервал в 2 пикселя. Таким образом, вы можете иметь несколько пунктирной границы, используя несколько фонов.
Попробуйте его в этом [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>
в
Здесь'ы трюк, я've использовали в одном из недавних проектов, чтобы достичь почти все, что я хочу с горизонтальными границами. Я использую <ч/>
каждый раз, когда мне нужен горизонтальные границы. Основной способ, чтобы добавить границу к 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*/
}
Это также означает, что вы можете добавить текст-тень точки, градиенты и т. д. Все, что вы хотите...
Ну, это работает действительно здорово для горизонтальных границ. Если вам нужны вертикальные, вы можете задать класс для другой HR и использовать свойства CSS3 и "ротация".
Вы не можете сделать это на чистом CSS - на основе CSS3 спецификации даже имеет конкретную цитату по этому поводу:
Примечание: нет никакого контроля над интервалы между точками и тире, ни по длине черточек. Реализации предлагается выбрать интервал, который делает углы симметричны.
Однако, вы можете использовать либо граница изображения или фонового изображения, что делает трюк.
При этом используется стандартная граница CSS и псевдо элемент+переполнения:скрытый. В примере, вы получите три разных 2 пикселя пунктирная границ: нормальный, интервал вроде 5 пикселей, расположенных как значение 10px. На самом деле значение 10px только 10-8=2 пикселя видны.
в
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>
в
Применяется для мелких элементов с большими закругленными углами может сделать для некоторых интересных эффектов.
Смотрите МДН документы Для значения пограничные
:
- нет : границы, задает ширину до 0. Это значение по умолчанию.
- скрытая : то же, что 'Нет', за исключением точки зрения разрешение пограничного конфликта за стол элементы.
- пунктир : серия коротких прочерки или отрезков.
- пунктир : Серии точек.
- двухместный : две прямые линии, которые складываются в пиксельном размере определены как границы-ширину.
- ПАЗ : Резной эффект.
- вставка : делает коробку встраиваться.
- прежде всего : противоположность 'вставка'. Делает поле появляются 3Д (с тиснением).
- Ридж : противоположность 'ПАЗ'. Граница отображается в 3D (выходит).
- твердые : один, прям, сплошная линия.
Помимо этих вариантов, нет никакого способа, чтобы влиять на стандартные границы's стиль.
Если возможности есть не по своему вкусу, вы можете использовать CSS3 и#39;ы границы изображения
но учтите, что поддержка браузера для этого еще очень нестабильный.
Так, начиная с ответа учитывая и применяя то, что 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>
в
Стоит отметить, что 10 ПКС в размер фона дает площадь, что черточки и разрыв покрытия. 50% от фона тега как широкое тире на самом деле. Поэтому можно иметь различной длины черточек на каждой стороне.
Это очень старый вопрос, но он имеет высокий рейтинг в Google, поэтому я'м собираюсь бросить в мой метод, который может работать в зависимости от ваших потребностей.
В моем случае, я хотела толстые пунктирные границы, которые имели минимальный перерыв между штрихами. Я использовал генератор шаблон в CSS (как этот: http://www.patternify.com/), чтобы создать 10 ПКС в ширину и 1 пиксель в высоту узор. 9рх это сплошные черточки цвета, в 1px белого цвета.
В моей CSS, я включил, что рисунок в качестве фонового изображения, а затем масштабировать его с помощью фон-размер атрибута. Я закончил с 20 пикселей по 2 пикселя повторяется черточки, 18px, что сплошная линия в 2 пикселя и белый. Вы могли бы вырасти еще на очень толстой пунктирной линией.
Приятно то, так как изображение кодируется как данные, которые вы не'т иметь дополнительный внешний HTTP-запрос, так там'ы без бремени производительности. У меня хранится мое изображение как Сасс переменной, чтобы я мог использовать его на моем сайте.
Это старый, но все еще очень актуальная тема. Текущее верхний ответ работает хорошо, но только для очень мелких точек. Как Bhojendra Rauniyar уже отметили в комментариях, для больших (>2 пикселя) точки, точки появляются четырехугольные, не круглые. Я нашел эту страницу ищут расстоянии dots, не разнесенные squares (или даже черточек, так как некоторые ответы здесь использовать).
Исходя из этого, я использовал радиально-градиентных
. Кроме того, используя ответ от 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>
в
В радиально-градиентных
ожидает:
Вот, я хотела диаметром 5 пикселей (2.5 Военторга радиус) точка, с 2 диаметра (10 ПКС) между точками, добавив до 15px. `Фон-размер должен соответствовать этим.
Две остановки определены так, что точка-это красиво и гладко: сплошной черный на половину радиуса и градиента на полный радиус.
Так много людей говорят "Вы можете'т то". Да, вы можете. Это's садится, что не существует правил 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 в данном случае) - это правило, которое определяет желоба и"ширина" по. Фои, конечно, нужно корректировать цвет, чтобы соответствовать вашим потребностям. Это небольшой пример для горизонтальной линии, используйте влево и вправо, чтобы сделать вертикальные линии.
Короткий ответ: Вы можете'т.
Вы должны использовать границы изображения
собственность и несколько изображений.
Если вы'повторно только на современных браузерах, и вы можете иметь свою границу по отдельному элементу от вашего содержания, то вы можете использовать шкалу для CSS преобразования, чтобы получить больше точки и тире:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
Это занимает много позиционные настройки, чтобы получить его к линии, но это работает. Изменяя толщину границы, начальный размер и коэффициент масштабирования, вы можете получить только насчет толщины-соотношение длины вы хотите. Единственное, что вы можете'т прикоснуться Дэш-к-коэффициент разрыва.
Дом 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>
в
Я сделал функцию JavaScript, чтобы создать точки с СВГ. Вы можете отрегулировать точку размером и в коде 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>
в
<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>
это то, что я сделал - использовать изображение введите сюда описание изображения