CSS3 방사형 그래디언트가 중심 및 크기 모양을 정의하는 방법에 대한 자세한 설명(코드 예)

이 글에서는 CSS3 방사형 그래디언트가 중심 및 크기 모양을 정의하는 방법에 대해 자세히 설명합니다(코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

방사형 그래디언트 --radial-gradient()가 지원되는 모든 브라우저에서 올바르게 작동하도록 하고 향후 지원을 포함하는 몇 가지 새로운 기능을 갖습니다. 다음과 같이 작성할 수 있습니다:

.demo {
	/* 不支持浏览器的后备 */ 
	background: #000000;
	
	/* 旧的WebKit语法 */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
	
	/* 新的WebKit语法 */ 
	background-image: -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	background-image: -moz-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* IE10 + */ 
	background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* Opera (13?) */
	background-image: -o-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
        
    /* 标准写法*/
    background-image: radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
}

표준 작성을 사용하여 방사형 그래디언트의 구문을 단계별로 분석해 보겠습니다.

.demo {  
    background-image: radial-gradient(center center, circle cover, black, blue, green, red, purple, white);  
}

Definition Gradient center

방사형 그래디언트 함수에 전달된 첫 번째 인수(예, Radial-gradient()는 함수이므로 괄호가 있는 이유입니다. 이유)는 그라디언트가 완료되면 생성되는 타원의 중심입니다. 위의 예에서는 "center center" 값 쌍을 사용했습니다.

"방사형"이라는 단어는 "중심에서 반경을 따라 바깥쪽으로..."를 의미합니다. 따라서 첫 번째 매개변수는 외부 작업이 시작되는 위치를 정의합니다.

기본적으로 이 매개변수는 background-position 속성에 입력한 모든 값을 받아들일 수 있습니다. 그라데이션 중심 위치의 기본값 또는 초기 값은 중심 중심입니다.

모양 및 크기 정의

함수의 두 번째 매개변수는 그라디언트의 모양과 크기를 정의합니다. .

두 번째 매개변수 의 첫 번째 부분은 원 또는 타원(예: 원 또는 타원)일 수 있습니다. 차이점은 기본적으로 타원은 완벽한 원이 아니라는 것입니다. 따라서 그라디언트의 크기와 중심에 따라 타원 값은 그라디언트를 타원형으로 만들 수 있지만 원 값은 그라디언트가 항상 완벽한 원임을 의미합니다.

두 번째 매개변수 (크기 정의)의 두 번째 부분은 6가지 값(키워드) 중 하나를 취할 수 있습니다. 다음과 같을 수 있습니다:

1, 가장 가까운 쪽(가장 가까운 끝)

2, 가장 가까운 코너(가장 가까운 코너)

#🎜🎜 # 3, 먼 쪽(가장 먼 쪽)

4, 먼 쪽(가장 먼 쪽)

5, 포함(포함)

# 🎜🎜# 6, 표지

언뜻 보면 이러한 값을 파악하기가 조금 어려울 수 있으므로 이해를 돕기 위해 예를 들어 하나씩 분석해 보겠습니다. 각 값의 기능을 설명할 수 있도록 기본 검정에서 흰색 그라데이션을 사용해 보겠습니다. 코드는 다음과 같습니다.

.demo {
  background-image: radial-gradient(50px 50px, circle closest-side, black, white);
}

다른 모든 값은 동일하게 유지되지만 크기 값(현재 가장 가까운쪽에 표시됨)을 변경하여 각 값이 모양에 미치는 영향을 확인할 수 있습니다. 그라데이션의.

모양과 크기 값을 좀 더 명확하게 하기 위해 중심 위치를 50px 50px로 설정하였으니 참고해주세요.

closest-side

이 값은 그라디언트 가장자리가 그라디언트 중심에 가장 가까운 요소의 측면과 교차하도록 합니다. 다음과 같습니다.

closest-corner

이 값은 그라디언트의 가장자리가 그라디언트 중심에 가장 가까운 요소의 모서리와 만나도록 합니다. 여기 있습니다:

그라디언트 전체 모양의 일부가 잘려져 있으니 주의하세요. 이는 모서리가 요소의 모서리와 교차하도록 요소의 모서리로 밀려나기 때문입니다.

farthest-side (가장 먼 쪽)

이 값은 첫 번째 값과 반대이므로 가장자리가 됩니다. 그라디언트 그라디언트 중심에서 가장 먼 요소의 측면을 만나세요.

이 예에서 그라디언트의 크기는 그라디언트의 크기와 다릅니다. 다른 두 값은 그라데이션이 요소의 가장 먼 가장자리에 닿도록 강제로 늘어나기 때문입니다.

farthest-corner

이 값을 사용하면 그라디언트가 그라디언트 중심에서 가장 먼 요소의 모퉁이까지 늘어납니다. #🎜 🎜#

이제 그라데이션이 더 많은 요소를 포괄합니다.

contain

이 값을 사용하면 요소의 테두리에 의해 잘리지 않고 완전히 포함될 때까지 요소가 그라데이션을 증폭합니다. 모든 그라데이션:

낯이 익지 않나요? 글쎄요, 위에서 언급한 것처럼 이 값은 최근접측과 동일하므로 그렇게 해야 합니다.

cover

이 값은 구성 요소의 전체 영역을 덮을 때까지 그라데이션을 증폭시킵니다. # 🎜🎜 #

이 값은 가장 먼 모서리와 동일하므로 친숙해 보입니까?

참고: 크기를 정의하기 위해 키워드를 사용하면 진행형 원의 크기를 정확하게 정의할 수 없습니다.

요약: 위 내용은 이 글에서 소개한 내용을 모두 담은 것으로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 CSS3 방사형 그래디언트가 중심 및 크기 모양을 정의하는 방법에 대한 자세한 설명(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!