Как сделать border style circle на css?
Как сделать границу кружочками на css, как на картинке, не используя при этом повторяющееся изображение круга, но при этом, чтобы при различном размере экрана количество кружков отличалось?
Кроссбраузерность приветствуется.
css css3
изменён 14 часов назад
by Verng
2,24721131
задан 19 часов назад
ВасяВася
2,22521545
добавить комментарий |
Как сделать границу кружочками на css, как на картинке, не используя при этом повторяющееся изображение круга, но при этом, чтобы при различном размере экрана количество кружков отличалось?
Кроссбраузерность приветствуется.
css css3
изменён 14 часов назад
by Verng
2,24721131
задан 19 часов назад
ВасяВася
2,22521545
border: 5px dotted #fff;???
– DaemonHK
19 часов назад
2
Нет такого. Есть dotted, но стандарт не оговаривает форму «точек», могут быть круглые, могут быть квадратные. Лучше, наверное, использовать border-image css-tricks.com/almanac/properties/b/border-image
– Alexey Ten
19 часов назад
добавить комментарий |
Как сделать границу кружочками на css, как на картинке, не используя при этом повторяющееся изображение круга, но при этом, чтобы при различном размере экрана количество кружков отличалось?
Кроссбраузерность приветствуется.
css css3
изменён 14 часов назад
by Verng
2,24721131
задан 19 часов назад
ВасяВася
2,22521545
Как сделать границу кружочками на css, как на картинке, не используя при этом повторяющееся изображение круга, но при этом, чтобы при различном размере экрана количество кружков отличалось?
Кроссбраузерность приветствуется.
css css3
css css3
изменён 14 часов назад
by Verng
2,24721131
задан 19 часов назад
ВасяВася
2,22521545
изменён 14 часов назад
by Verng
2,24721131
задан 19 часов назад
ВасяВася
2,22521545
изменён 14 часов назад
by Verng
2,24721131
изменён 14 часов назад
by Verng
2,24721131
изменён 14 часов назад
by Verng
2,24721131
2,24721131
задан 19 часов назад
ВасяВася
2,22521545
задан 19 часов назад
ВасяВася
2,22521545
задан 19 часов назад
ВасяВася
2,22521545
2,22521545
border: 5px dotted #fff;???
– DaemonHK
19 часов назад
2
Нет такого. Есть dotted, но стандарт не оговаривает форму «точек», могут быть круглые, могут быть квадратные. Лучше, наверное, использовать border-image css-tricks.com/almanac/properties/b/border-image
– Alexey Ten
19 часов назад
добавить комментарий |
border: 5px dotted #fff;???
– DaemonHK
19 часов назад
2
Нет такого. Есть dotted, но стандарт не оговаривает форму «точек», могут быть круглые, могут быть квадратные. Лучше, наверное, использовать border-image css-tricks.com/almanac/properties/b/border-image
– Alexey Ten
19 часов назад
border: 5px dotted #fff;???– DaemonHK
19 часов назад
border: 5px dotted #fff;???– DaemonHK
19 часов назад
2
2
Нет такого. Есть dotted, но стандарт не оговаривает форму «точек», могут быть круглые, могут быть квадратные. Лучше, наверное, использовать border-image css-tricks.com/almanac/properties/b/border-image
– Alexey Ten
19 часов назад
Нет такого. Есть dotted, но стандарт не оговаривает форму «точек», могут быть круглые, могут быть квадратные. Лучше, наверное, использовать border-image css-tricks.com/almanac/properties/b/border-image
– Alexey Ten
19 часов назад
добавить комментарий |
1 ответ
1
текущие
по дате публикации
голоса
Варианты, которыми я пользовался:
1. Градиентом:
https://caniuse.com/#search=radial-gradient
.block {
width: 200px;
padding: 20px;
background:
radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px 10px repeat-x;
}<div class="block">Пример с градиентом</div>2. С картинкой, как было предложено в комментарии. Но лучше не png, как в примере, а svg:
https://caniuse.com/#feat=border-image
.block2 {
border-width: 0 0 13px 0;
border-style: dotted;
border-color: #d57e00;
border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
border-image-slice: 33% 33%;
border-image-repeat: round;
}<h1 class="block2">Пример с картинкой SVG</h1>Не сильно силен в вёрстке, но думаю ещё есть варианты.
ответ дан 18 часов назад
by Verngby Verng
2,24721131
добавить комментарий |
Ваш ответ
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "609"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "на платформе u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "Пользовательский контент попадает под действие u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003eлицензии cc by-sa 3.0u003c/au003e с u003ca href="https://stackoverflow.com/legal/content-policy"u003eуказанием ссылки на источникu003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Зарегистрируйтесь или войдите
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fru.stackoverflow.com%2fquestions%2f954901%2f%25d0%259a%25d0%25b0%25d0%25ba-%25d1%2581%25d0%25b4%25d0%25b5%25d0%25bb%25d0%25b0%25d1%2582%25d1%258c-border-style-circle-%25d0%25bd%25d0%25b0-css%23new-answer', 'question_page');
}
);
Отправить без регистрации
Необходима, но никому не показывается
1 ответ
1
текущие
по дате публикации
голоса
1 ответ
1
текущие
по дате публикации
голоса
текущие
по дате публикации
голоса
текущие
по дате публикации
голоса
Варианты, которыми я пользовался:
1. Градиентом:
https://caniuse.com/#search=radial-gradient
.block {
width: 200px;
padding: 20px;
background:
radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px 10px repeat-x;
}<div class="block">Пример с градиентом</div>2. С картинкой, как было предложено в комментарии. Но лучше не png, как в примере, а svg:
https://caniuse.com/#feat=border-image
.block2 {
border-width: 0 0 13px 0;
border-style: dotted;
border-color: #d57e00;
border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
border-image-slice: 33% 33%;
border-image-repeat: round;
}<h1 class="block2">Пример с картинкой SVG</h1>Не сильно силен в вёрстке, но думаю ещё есть варианты.
ответ дан 18 часов назад
by Verngby Verng
2,24721131
добавить комментарий |
Варианты, которыми я пользовался:
1. Градиентом:
https://caniuse.com/#search=radial-gradient
.block {
width: 200px;
padding: 20px;
background:
radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px 10px repeat-x;
}<div class="block">Пример с градиентом</div>2. С картинкой, как было предложено в комментарии. Но лучше не png, как в примере, а svg:
https://caniuse.com/#feat=border-image
.block2 {
border-width: 0 0 13px 0;
border-style: dotted;
border-color: #d57e00;
border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
border-image-slice: 33% 33%;
border-image-repeat: round;
}<h1 class="block2">Пример с картинкой SVG</h1>Не сильно силен в вёрстке, но думаю ещё есть варианты.
ответ дан 18 часов назад
by Verngby Verng
2,24721131
добавить комментарий |
Варианты, которыми я пользовался:
1. Градиентом:
https://caniuse.com/#search=radial-gradient
.block {
width: 200px;
padding: 20px;
background:
radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px 10px repeat-x;
}<div class="block">Пример с градиентом</div>2. С картинкой, как было предложено в комментарии. Но лучше не png, как в примере, а svg:
https://caniuse.com/#feat=border-image
.block2 {
border-width: 0 0 13px 0;
border-style: dotted;
border-color: #d57e00;
border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
border-image-slice: 33% 33%;
border-image-repeat: round;
}<h1 class="block2">Пример с картинкой SVG</h1>Не сильно силен в вёрстке, но думаю ещё есть варианты.
ответ дан 18 часов назад
by Verngby Verng
2,24721131
Варианты, которыми я пользовался:
1. Градиентом:
https://caniuse.com/#search=radial-gradient
.block {
width: 200px;
padding: 20px;
background:
radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px 10px repeat-x;
}<div class="block">Пример с градиентом</div>2. С картинкой, как было предложено в комментарии. Но лучше не png, как в примере, а svg:
https://caniuse.com/#feat=border-image
.block2 {
border-width: 0 0 13px 0;
border-style: dotted;
border-color: #d57e00;
border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
border-image-slice: 33% 33%;
border-image-repeat: round;
}<h1 class="block2">Пример с картинкой SVG</h1>Не сильно силен в вёрстке, но думаю ещё есть варианты.
.block {
width: 200px;
padding: 20px;
background:
radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px 10px repeat-x;
}<div class="block">Пример с градиентом</div>.block {
width: 200px;
padding: 20px;
background:
radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px 10px repeat-x;
}<div class="block">Пример с градиентом</div>.block2 {
border-width: 0 0 13px 0;
border-style: dotted;
border-color: #d57e00;
border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
border-image-slice: 33% 33%;
border-image-repeat: round;
}<h1 class="block2">Пример с картинкой SVG</h1>.block2 {
border-width: 0 0 13px 0;
border-style: dotted;
border-color: #d57e00;
border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
border-image-slice: 33% 33%;
border-image-repeat: round;
}<h1 class="block2">Пример с картинкой SVG</h1>ответ дан 18 часов назад
by Verngby Verng
2,24721131
изменён 15 часов назад
ответ дан 18 часов назад
by Verngby Verng
2,24721131
ответ дан 18 часов назад
by Verngby Verng
2,24721131
ответ дан 18 часов назад
by Verngby Verng
2,24721131
2,24721131
добавить комментарий |
добавить комментарий |
Спасибо за ваш ответ на Stack Overflow на русском!
- Пожалуйста, убедитесь, что публикуемое сообщение отвечает на поставленный вопрос. Предоставьте как можно больше деталей, расскажите про проведенное исследование!
Но избегайте …
- Просьб помощи, уточнений или ответов на темы не относящиеся к вопросу.
- Ответов основанных на мнениях; приводите аргументы основанные только на реальном опыте.
Также, обратите внимание на заметку в справочном центре о том, как писать ответы.
Зарегистрируйтесь или войдите
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fru.stackoverflow.com%2fquestions%2f954901%2f%25d0%259a%25d0%25b0%25d0%25ba-%25d1%2581%25d0%25b4%25d0%25b5%25d0%25bb%25d0%25b0%25d1%2582%25d1%258c-border-style-circle-%25d0%25bd%25d0%25b0-css%23new-answer', 'question_page');
}
);
Отправить без регистрации
Необходима, но никому не показывается
Зарегистрируйтесь или войдите
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Зарегистрируйтесь или войдите
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Зарегистрируйтесь или войдите
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Необходима, но никому не показывается
Необходима, но никому не показывается
Необходима, но никому не показывается
Необходима, но никому не показывается
Необходима, но никому не показывается
Необходима, но никому не показывается
Необходима, но никому не показывается
Необходима, но никому не показывается
border: 5px dotted #fff;???– DaemonHK
19 часов назад
2
Нет такого. Есть dotted, но стандарт не оговаривает форму «точек», могут быть круглые, могут быть квадратные. Лучше, наверное, использовать border-image css-tricks.com/almanac/properties/b/border-image
– Alexey Ten
19 часов назад