CSS

[gradient] CSS - repeating-radial-gradient () 함수 - 방사형 그레이디언트 반복 (= 그라디언트, 그래디언트)

repeating-radial-gradient () 예제

 

<style>

div {

  height: 200px;

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

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

 

 

repeating-radial-gradient () 정의

 

방사형 그레이디언트 반복.

 


 

1.

외래어표기법 상, 그레이디언트가 맞음. 


2.
기본 사용법은 radial-gradient()와 유사
https://homzzang.com/b/css-272

3.
CSS3

 

4.

IE10 이상 최신 주요 브라우저 지원

구 버전 브라우저 경우 접두어 필요.

https://homzzang.com/b/css-126

 

 

 

repeating-radial-gradient () 구문

 

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

 


 

[매개변수]

radial-gradient() 함수와 동일
https://homzzang.com/b/css-272




분류 제목
animation CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/…
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬/중앙정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
button CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)
pagination CSS - 페이징 - 기본 스타일 (Simple Pagination)
pagination CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
12/33
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인