CSS3 그라디언트

CSS3 그라디언트를 사용하면 두 개 이상의 지정된 색상 사이의 부드러운 전환을 표시할 수 있습니다.

이전에는 이러한 효과를 얻으려면 이미지를 사용해야 했습니다. 그러나 CSS3 그라데이션을 사용하면 다운로드 이벤트와 대역폭 사용량을 줄일 수 있습니다. 또한 그라데이션이 브라우저에 의해 생성되므로 확대할 때 그라데이션이 있는 요소가 더 잘 보입니다.

CSS3는 두 가지 유형의 그라디언트를 정의합니다.

선형 그라디언트 - 아래쪽/위/왼쪽/오른쪽/대각선 방사형 그라디언트 - 중심으로 정의

CSS3 선형 그라디언트

선형 그라디언트를 만들려면 색상 노드를 두 개 이상 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 시작점과 방향(또는 각도)도 설정할 수 있습니다.

Syntax

배경: 선형 그라데이션(방향, 색상 정지1, 색상 정지2, ...);

선형 그라데이션 - 위에서 아래로(기본값)

아래 예에서는 상단 선형에서 시작하는 방법을 보여줍니다. 구배. 빨간색에서 시작하여 천천히 파란색으로 전환:

php中文网(php.cn)

线性渐变 - 从上到下

从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

선형 그라데이션 - 왼쪽에서 오른쪽으로

아래 예는 왼쪽에서 시작하는 선형 그라데이션을 보여줍니다. 시작점은 빨간색이고 천천히 파란색으로 전환됩니다.

php中文网(php.cn)

线性渐变 - 从左到右

从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

선형 그라데이션 - 대각선

수평 및 수직 시작 위치를 지정하여 대각선 그라데이션을 만들 수 있습니다.

아래 예에서는 왼쪽 상단에서 시작하여(오른쪽 하단으로) 선형 그래디언트를 보여줍니다. 빨간색에서 시작하여 천천히 파란색으로 전환:

php中文网(php.cn)

线性渐变 - 对角

从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

각도 사용

그라디언트 방향을 더 세밀하게 제어하려면 미리 정의된 방향(아래쪽, 위쪽, 오른쪽, 왼쪽, 오른쪽 아래 등) 대신 각도를 정의할 수 있습니다.

구문

배경: 선형 그라데이션(angle, color-stop1, color-stop2);

각도는 수평선과 그라데이션 선 사이의 각도를 나타내며 시계 반대 방향으로 계산됩니다. 즉, 0deg는 아래에서 위로 그라데이션을 만들고, 90deg는 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.

그러나 많은 브라우저(Chrome, Safari, Fiefox 등)는 이전 표준을 사용하므로 0deg는 왼쪽에서 오른쪽으로 그라데이션을 만들고 90deg는 아래에서 위쪽으로 그라데이션을 만듭니다. 변환 공식 90 - x = y 여기서 x는 표준 각도이고 y는 비표준 각도입니다.

다음 예는 선형 그래디언트에서 각도를 사용하는 방법을 보여줍니다.

php中文网(php.cn)

线性渐变 - 使用不同的角度

0deg

90deg

180deg

-90deg

注意： Internet Explorer 9 及之前的版本不支持渐变。

여러 색상 노드 사용

다음 예는 여러 색상 노드를 설정하는 방법을 보여줍니다.

php中文网(php.cn)

3 个颜色结点（均匀分布）

7 个颜色结点（均匀分布）

3 个颜色结点（不均匀分布）

注意： 当未指定百分比时，颜色结点不会自动均匀分布。

注意： Internet Explorer 9 及之前的版本不支持渐变。

투명도 사용 )

CSS3 그래디언트도 페이딩 효과를 만드는 데 사용할 수 있는 투명성을 지원합니다.

투명도를 추가하기 위해 rgba() 함수를 사용하여 색상 노드를 정의합니다. rgba() 함수의 마지막 매개변수는 0에서 1 사이의 값이 될 수 있으며 색상의 투명도를 정의합니다. 0은 완전 투명을 의미하고 1은 완전 불투명을 의미합니다.

아래 예는 왼쪽부터 시작하는 선형 그래디언트를 보여줍니다. 완전히 투명하게 시작하여 완전히 불투명한 빨간색으로 천천히 전환됩니다.

php中文网(php.cn)

线性渐变 - 透明度

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

注意： Internet Explorer 9 及之前的版本不支持渐变。

CSS3 방사형 그라데이션

방사형 그라데이션은 중심으로 정의됩니다.

방사형 그래디언트를 생성하려면 최소 두 개의 색상 노드도 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 그라디언트의 중심, 모양(프로토타입 또는 타원) 및 크기도 지정할 수 있습니다. 기본적으로 그라디언트의 중심은 중심(중심점을 의미)이고 그라디언트의 모양은 타원(타원을 의미)이며 그라디언트의 크기는 가장 먼 모서리(가장 먼 모서리를 의미)입니다.

구문

배경: 방사형 그라데이션(중심, 모양 크기, 시작 색상, ..., 마지막 색상);

방사형 그라데이션 - 색상 노드가 고르게 분포됩니다(기본적으로)

php中文网(php.cn)