Я використовую пунктирну межу в стилі, як
.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;
Ви можете налаштувати розмір фонового розміру та пропорцію із відсотками лінійного градієнта. У цьому прикладі у мене є пунктирна лінія з точкою 1px та інтервалом 2px. Таким чином, ви можете мати декілька пунктирних облямівок, використовуючи кілька фонів.
Спробуйте в цьому JSFiddle або подивіться на приклад фрагмента коду:
Ось хитрість, яку я використав для нещодавнього проекту, щоб досягти майже всього, що я хочу, з горизонтальними рамками. Я використовую <hr/>кожен раз, коли мені потрібна горизонтальна рамка. Основний спосіб додати межу до цієї 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*/
}
Це також означає, що ви можете додати текстовий тінь до крапок, градієнтів тощо. Все, що завгодно ...
Що ж, це справді чудово підходить для горизонтальних меж. Якщо вам потрібні вертикальні, ви можете вказати клас для ще однієї години та використовувати rotationвластивість CSS3 .
Ви не можете це зробити з чистим CSS - специфікація CSS3 навіть має конкретну цитату щодо цього:
Примітка: Не існує контролю над відстанню крапок і тире, а також над довжиною тире. Реалізації рекомендується вибирати міжряддя, які роблять кути симетричними.
Однак ви можете використовувати або рамкове зображення, або фонове зображення, що робить фокус.
border: dotted, але це можна зробити з допомогою градієнтів , як відповідь Eagorajose показав , .
Для цього використовується стандартна межа CSS та псевдоелемент + переповнення: приховано. У прикладі ви отримуєте три різні штрихові рамки 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>Варто зазначити, що 10 пікселів у фоновому розмірі надає площу, яку покриють штрих і проміжок. 50% фонового тегу - це наскільки широкий тире насправді. Тому можливо мати різну довжину тире на кожній стороні кордону.
Дивіться документацію MDN для доступних значень border-style:
- None: Без кордону, ширина встановлює 0. Це значення за замовчуванням.
- приховано: Те саме, що "жодне", крім випадків вирішення прикордонних конфліктів для елементів таблиці.
- пунктирна: Серія коротких тире або ліній сегмента.
- пунктир: Серія крапок.
- подвійний: дві прямі, що додають до кількості пікселів, визначеної як ширина межі.
- паз: різьблений ефект.
- вставка: робить поле видається вбудованим.
- Початок: Напроти 'вставки'. Робить поле відображеним у 3D (тисненим).
- хребет: Навпроти 'канавки'. Межі відображаються 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>Це стара, але все ще дуже актуальна тема. Топової відповідь працює добре, але тільки для дуже маленьких точок. Як вже зазначав Бходжендра Рауніар у коментарях, для більших точок (> 2 пікселів) точки виглядають квадратними, а не круглими. Я знайшов цю сторінку, яка шукає розставлені точки , а не розташовані квадрати (або навіть тире, як деякі відповіді тут використовують).
Спираючись на це, я використовував 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 пікс. 9 пікселів - це суцільний штриховий колір, 1 пікс - білий.
У своєму CSS я включив цей візерунок як фонове зображення, а потім його масштабував за допомогою атрибута розміру фону. У кінцевому підсумку я повторив тире з 20 пікселями на 2 пікселя, 18 пікселів - суцільною лінією та 2 пікселями білого кольору. Ви можете розробити це ще більше для дійсно товстої пунктирної лінії.
Приємно, адже зображення кодується як дані, у вас немає додаткового зовнішнього запиту 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%;
}В основному висота бордюру (в цьому випадку 5 пікселів) - це правило, яке визначає "ширину жолоба". Якщо, звичайно, вам потрібно буде налаштувати кольори відповідно до ваших потреб. Це також є невеликим прикладом для горизонтальної лінії, використовуйте ліву та праву, щоб зробити вертикальну лінію.
Я створив функцію 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) і намалювати пунктирну лінію всередині. Всередині полотна ви можете керувати тим, наскільки довгими будуть тире та проміжок між ними.