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

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2178 2178

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>

<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.

댓글 작성

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

로그인하기

게시판 목록

퍼블리셔팁

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
647	HTML	도대체 이 그라데이션 효과는 어떻게 주는걸까요? ㅠㅠ [6]	프릭스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4792
646	HTML	오늘은 뭐 짜달라, 고쳐달라는 분도 안 계시고, [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4494
645	HTML	zurb의 foundation (반응형 프레임워크) [12]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	7373
644	HTML	스크롤에 따라 변하는 메뉴... [1]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4720
643	HTML	로고 크기에 제한이 있나요? [21]	다평정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5399
642	HTML	이거 진짜 ㅂ ㅅ 같은건데... ctrl+ 0 ...OTL [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3618
641	HTML	html5 책 좀 추천 해주세요. ^^ [3]	웹어드민 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3240
640	HTML	IE에서 CSS3 메뉴 적용이 되지 않습니다. [7]	돌맹나래 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6436
639	HTML	웹 표준화 관련 사이트들 [4]	꼼꼼이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4019
638	HTML	IE 때문에 고생하시는 분들께 드리는 팁 하나 [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3070
637	HTML	브라우저별 개별 css 적용 [1]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3607
636	HTML	안녕하세요~ for문과 CSS 질문입니다. [2]	로날듀우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2752
635	HTML	background-size:cover [1]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4248
634	HTML	css 간단한 질문 하나만 드릴께요 [4]	띠리링 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2584
633	HTML	주소 검색 소스~ 부탁드려요 ^^	basketball 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3136
632	HTML	CSS 게시판 위치별 제어 [5]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3289
631	HTML	홈페이지 카테고리 수정 도움 요청 [2]	덕수다아 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4357
630	HTML	너무 멋진 사이트 발견! 그런데! 질문 [3]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3395
629	HTML	이미지 부드럽게 확대 하기 간단css [1]	크라이스트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	10197
628	HTML	접기/펼치기 소스 질문입니다. 도와주세요~~ [5]	실바 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	9055
627	HTML	크로스 브라우징..시 CSS를 잘 못부르네요. [2]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3281
626	HTML	웹 표준으로 했는데 블랭크가...또 쌩기는데 이번엔.. [2]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2289
625	HTML	css...왜 위에 블랭크가 생길까요? [3]	빌딩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2881
624	HTML	jQuery 이미지 체크박스 [3]	웹군 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	7749
623	HTML	엄한 질문 하나 드립니다. ㅎㅎㅎ [3]	오십원 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2562
622	HTML	html5와 플래시로 제작된 기능이 동일하게 구현이 되는 예 [2]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3305
621	HTML	아이프레임으로 불러온 문서 내 특정영역 이동 [2]	웹어스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3377
620	HTML	메뉴 테두리를 둥글게 하고싶은데 안되네요... [2]	마이피씨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4624
619	HTML	zen코딩 치트문서~ [8]	there007 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3186
618	HTML	젠코딩 동영상 [2]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3587