Как сделать границу кружочками на css
, как на картинке, не используя при этом повторяющееся изображение круга, но при этом, чтобы при различном размере экрана количество кружков отличалось?
Кроссбраузерность приветствуется.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВарианты, которыми я пользовался:
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>
Не сильно силен в вёрстке, но думаю ещё есть варианты.
Используя широкую строку и атрибут stroke-linecap="round"
, а также stroke-dasharray="0, stroke-width"
, где первый параметр - (черта), равен нулю, а второй параметр (пробел) равен ширине строки
#1. Получим нужный эффект:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 0 400 50">
<path d="M20,25 L390,25" fill="none" stroke="red" stroke-dasharray="0, 10" stroke-width="10" stroke-linecap="round" />
</svg>
Так как этот метод получился универсальный, потому что идет работа только с параметрами строки, его можно использовать для любой фигуры SVG
#2. Например квадрат
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 0 300 300">
<rect x="20" y="20" width="260" height="260" fill="none" stroke="Limegreen" stroke-dasharray="0, 14" stroke-width="15" stroke-linecap="round"/>
</svg>
#3. Круглая рамка вокруг изображения
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 0 300 300">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="300" height="300">
<image xlink:href="https://i.stack.imgur.com/WzerI.jpg" x="0" y="-5"
width="400" height="400" />
</pattern>
</defs>
<g fill="url(#img1)">
<circle cx="150" cy="150" r="110" stroke="gold" stroke-dasharray="0, 15" stroke-width="15" stroke-linecap="round" />
</g>
</svg>
border: 5px dotted #fff;
???