CSS3 그라디언트 방사형 그라데이션 반복

repeated-radial-gradient () 함수는 방사형 그래디언트를 반복하는 데 사용됩니다.

예

반복 방사형 그래디언트 :

#grad {

  background: red; /* For browsers that do not support gradients */

  /* For Safari 5.1 to 6.0 */

  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);

  /* For Opera 11.6 to 12.0 */

  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);

  /* For Firefox 3.6 to 15 */

  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);

  /* Standard syntax */

  background: repeating-radial-gradient(red, yellow 10%, green 15%);

}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

    height: 150px;

    width: 200px;

    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari 5.1 to 6.0 */

    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.6 to 12.0 */

    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */

    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */

}

</style>

</head>

<body>

<h3>Repeating Radial Gradient</h3>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Repeating Radial Gradient

Note: Internet Explorer 9 and earlier versions do not support gradients.