Как сделать border style circle на css?

158
20 ноября 2019, 08:10

Как сделать границу кружочками на css, как на картинке, не используя при этом повторяющееся изображение круга, но при этом, чтобы при различном размере экрана количество кружков отличалось?

Кроссбраузерность приветствуется.

Answer 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>

Не сильно силен в вёрстке, но думаю ещё есть варианты.

READ ALSO
Отмотка страницы к началу при смене сладов
javascript

Отмотка страницы к началу при смене сладов

Здравствуйте, можете подсказать как сделать так чтобы после каждой прокрутке сайта страница не отматывалась к верху? Код слайдера прикреплен...

 132
HTML5 audio поток &ldquo;прыгает&rdquo;
javascript

HTML5 audio поток “прыгает”

Реализую проигрывание аудиопотока на сайте с помощью JavaScript:

 164
Перебор родных свойств объекта
javascript

Перебор родных свойств объекта

ПриветНе подскажите, как перебрать родные свойства объекта?

 135
Поменять DOM с помощью JavaScript [закрыт]
javascript

Поменять DOM с помощью JavaScript [закрыт]

Не могу, поменять DOM с помошью "getElementById" и "innerHTML"Можете помочь как правильно сделать

 122