Есть вот такой код градиента:
.test_style7 {
height: 290px;
width: 290px;
display: inline-block;
border-radius: 100%;
}
.test27 {
background-image: repeating-radial-gradient(red, red 5px, orange 10px, orange 15px, yellow 20px, yellow 25px, green 30px, green 35px, skyblue 40px, skyblue 45px, blue 50px, blue 55px, violet 60px, violet 65px);
}
.test28 {
background-image: repeating-radial-gradient(black, black 2px, white 4px, white 6px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS функции: радиальные градиенты</title>
</head>
<body>
<section>
<div class="test27 test_style7"></div>
<div class="test28 test_style7"></div>
</section>
</body>
</html>
Я только поверхностно, примерно понимаю, как данный код делает четкие переводы между цветами, и смог бы на основе этого примера работать с другими градиентами, но не могу понять это основательно. Зачем, собственно, в записях точки остановки, цвета повторяются? Зачем писать "orange 10px, orange 15px", например? В чем логика этого шага на 5px при записи значений цвета?