Несколько окружностей вокруг круга

330

13 июля 2017, 00:32

Подскажите, как сделать несколько окружностей вокруг круга?
Тут нужно для каждой окружности применять отдельный блок со свойством border-radius?

Answer 1

Вариант с использованием box-shadow

body { 
  background: #000; 
} 
 
div { 
  margin: 38px; 
  height: 345px; 
  width: 345px; 
  background: #F5F5F5; 
  border-radius: 50%; 
  box-shadow: 0 0 0 6px #000, 0 0 0 8px #F5F5F5,  
              0 0 0 16px #000, 0 0 0 18px #F5F5F5,  
              0 0 0 26px #000, 0 0 0 28px #F5F5F5,  
              0 0 0 36px #000, 0 0 0 38px #F5F5F5; 
}

<div></div>

Answer 2

const canvas = document.createElement('canvas'); 
canvas.style.background = 'black'; 
const ctx = canvas.getContext('2d'); 
const radius = 100; 
canvas.width = canvas.height = 2*radius; 
const circle = r => { 
  ctx.beginPath(); 
  ctx.arc(radius, radius, r, 0, 2 * Math.PI, false); 
  ctx.stroke(); 
} 
ctx.fillStyle = ctx.strokeStyle = 'white'; 
for(let i = 0; i<7; i++) circle(radius - i*7); 
ctx.fill(); 
document.body.appendChild(canvas);

Answer 3

Можно сделать с помощью background:

div { 
  height: 345px; 
  width: 345px; 
  background: rgb(255, 255, 255); 
  background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 47%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 1) 52%, rgba(255, 255, 255, 1) 52%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 1) 53%, rgba(0, 0, 0, 1) 53%, rgba(0, 0, 0, 1) 58%, rgba(255, 255, 255, 1) 58%, rgba(255, 255, 255, 1) 59%, rgba(0, 0, 0, 1) 59%, rgba(0, 0, 0, 1) 64%, rgba(255, 255, 255, 1) 64%, rgba(255, 255, 255, 1) 65%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 1) 70%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 71%, rgba(0, 0, 0, 1) 71%); 
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 47%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 1) 52%, rgba(255, 255, 255, 1) 52%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 1) 53%, rgba(0, 0, 0, 1) 53%, rgba(0, 0, 0, 1) 58%, rgba(255, 255, 255, 1) 58%, rgba(255, 255, 255, 1) 59%, rgba(0, 0, 0, 1) 59%, rgba(0, 0, 0, 1) 64%, rgba(255, 255, 255, 1) 64%, rgba(255, 255, 255, 1) 65%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 1) 70%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 71%, rgba(0, 0, 0, 1) 71%); 
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 47%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 1) 52%, rgba(255, 255, 255, 1) 52%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 1) 53%, rgba(0, 0, 0, 1) 53%, rgba(0, 0, 0, 1) 58%, rgba(255, 255, 255, 1) 58%, rgba(255, 255, 255, 1) 59%, rgba(0, 0, 0, 1) 59%, rgba(0, 0, 0, 1) 64%, rgba(255, 255, 255, 1) 64%, rgba(255, 255, 255, 1) 65%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 1) 70%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 71%, rgba(0, 0, 0, 1) 71%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=1); 
}

<div></div>

Answer 4

Хм.. Похоже, радиальному градиенту добавление одного пикселя гладкости не добавляет, в отличие от линейного... Но всё равно оставлю так.

html, body { 
  margin: 0; 
} 
 
div { 
  width: 100vmin; 
  height: 100vmin; 
  margin: auto; 
 
  background: radial-gradient( 
    circle at 50% 50%, 
    black       0%, 
    black calc(45% - 1px), 
    white      45%, 
    white calc(45% + 3px), 
    black calc(45% + 3px + 1px), 
    black calc(55% - 1px), 
    white      55%, 
    white calc(55% + 3px), 
    black calc(55% + 3px + 1px), 
    black calc(65% - 1px), 
    white      65%, 
    white calc(65% + 3px), 
    black calc(65% + 3px + 1px) 
  ); 
}