CSS3 그라디언트 방사형 그라데이션 반복 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

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

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

본문


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.



추천
0
  • 복사

댓글 0개

© SIRSOFT
현재 페이지 제일 처음으로