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

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

· 8년 전 · 2166


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.



댓글 작성

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

로그인하기

게시글 목록

번호 제목
3530
3529
3497
3472
3471
3451
3442
3441
3437
3436
3425
3421
3420
3405
3402
3399
3397
3394
3393
3392
3391
3390
3389
3388
3387
3386
3385
3384
3383
3382