CSS 참조서

CSS @규칙(RULES)

CSS 속성大全

CSS repeating-radial-gradient() 함수

CSS 함수 repeating-radial-gradient() 함수는 원점에서 방사적으로 반복된 그래디언트로 구성된 <image>을 생성합니다. 그것은 radial과 유사합니다.-gradient() 함수는 모든 방향에서 반복하여 색상을 모든 컨테이너를 덮기 위해 사용된다. 함수의 결과는 <gradient> 데이터 타입의 객체이며, 특별한 <image> 타입입니다.

CSS 함수

온라인 예제

중복된 선형 그래디언트:

예제

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
<style>
#grad1　{
　　height:　200px;
　　background-image: repeating-radial-gradient(red,　yellow　10,　green　15%);
}
</style>
</head>
<body>
<h3>반복되는 원형 퍼플렉스</h3>
<div id="grad1></div>
<p><strong>주의:</strong> Internet Explorer　9　및 이전 버전은 퍼플렉스를 지원하지 않습니다.</p>
</body>
</html>

테스트해 보세요 ‹/›

정의와 사용법

repeating-radial-gradient() 함수는 반복되는 원형 퍼플렉스 "이미지"를 생성합니다.

지원 버전: CSS3

브라우저 호환성

표에서의 숫자는 해당 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

"webkit" 또는 "moz" 또는 "o"로 지정된 숫자는 해당 함수를 지원하는 첫 번째 버전 번호 프리퍼스입니다.

함수
repeating-radial-gradient()	26.0 10.0　-webkit-	10.0	16.0 3.6　-moz-	6.1 5.1　-webkit-	12.1 11.1　-o-

CSS 문법

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

값	설명
shape	퍼플렉스의 형태를 정의합니다. 다음과 같은 것 중 하나일 수 있습니다: ellipse (기본): 원형의 원형 퍼플렉스를 지정 circle: 원형의 원형 퍼플렉스를 지정
size	끝선 외곽의 구체적인 위치. 다음 값 중 하나일 수 있습니다: farthest-corner (기본): 원형 퍼플렉스의 반지름 길이를 원점에서 원점까지 가장 먼角으로 지정 closest-side: 원형 퍼플렉스의 반지름 길이를 원점에서 원점까지 가장 가까운 변으로 지정 closest-corner: 원형 퍼플렉스의 반지름 길이를 원점에서 원점까지 가장 가까운角으로 지정 farthest-side: closest와 유사-side와 반대로, 원형 퍼플렉스의 반지름 길이를 원점에서 원점까지 가장 먼 변으로 지정
position	원점 위치, on과 background과 유사-position 또는 transform-origin. 기본值为 "center"
start-color, ..., 마지막-color	퍼플렉스의 시작과 끝 색상을 지정하려면, 길이 값이나 백분율로 시작과 끝 색상 위치를 지정할 수 있지만, 음수 값을 허용하지 않습니다.

CSS 튜토리얼: CSS3 퍼플렉스

CSS 함수

CSS @charset 규칙 CSS 함수(Function)