테스트 사이트 - 개발 중인 베타 버전입니다

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

· 8년 전 · 2161


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.



댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3168
3167
3166
3165
3164
3163
3162
3161
3160
3159
3158
3157
3156
3155
3154
3153
3152
3151
3150
3149
3148
3147
3146
3145
3144
3143
3142
3136
3135
3134