CSS3 그래디언트


CSS3 Gradients

线性渐变

CSS3 그라데이션을 사용하면 두 개 이상의 지정된 색상 사이를 부드럽게 전환할 수 있습니다.

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

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

  • 선형 그라디언트 - 아래쪽/위/왼쪽/오른쪽/대각선

  • 방사형 그라디언트(방사형 그라디언트) - 중심으로 정의

브라우저 지원

표의 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 속성을 지원하기 위해 접두사를 추가해야 하는 첫 번째 버전을 지정합니다.


CSS3 선형 그라데이션

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

선형 그래디언트의 예:

线性渐变

Syntax

배경: 선형-그라디언트(direction, color-stop1, color-stop2, ...);

선형 그래디언트- 위에서 아래로(기본값)

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

선형 그라데이션 - 대각선

You 대각선 그라디언트를 만들기 위해 수평 및 수직 시작 위치를 지정하면 됩니다.

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

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

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

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

각도 사용

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

문법

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

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

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

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

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad3 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad4 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

예제 실행»

온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요

여러 색상 노드 사용

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 200px;
    background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}

#grad3 {
    height: 200px;
    background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
    background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>3 个颜色结点（均匀分布）</h3>
<div id="grad1"></div>

<h3>7 个颜色结点（均匀分布）</h3>
<div id="grad2"></div>

<h3>3 个颜色结点（不均匀分布）</h3>
<div id="grad3"></div>

<p><strong>注意：</strong> 当未指定百分比时，颜色结点不会自动均匀分布。</p>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

예제 실행»

온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요

다음 예는 색상 노드를 생성하는 방법을 보여줍니다. 밴드 무지개 색상과 텍스트가 포함된 선형 그라디언트:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
渐变背景
</div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

투명도 사용

CSS3 그라디언트도 투명도를 지원합니다 (투명도), 희미한 효과를 만드는 데 사용할 수 있습니다.

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

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

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

선형 그래디언트 반복

repeating-linear-gradient() 함수는 선형 그래디언트를 반복하는 데 사용됩니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>重复的线性渐变</h3>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

인스턴스 실행»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

CSS3 방사형 그라데이션

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

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

방사형 그라데이션의 예:

Radial gradient

Syntax

배경: Radial-gradient(center, 모양 크기, 시작 색상, ..., 마지막 색상);

방사형 그라데이션 - 색상 노드는 균등하게 분산됩니다(기본적으로)


Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

Run Instance»

온라인 예제를 보려면 "Run Instance" 버튼을 클릭하세요


Radial Gradient- The 색상 노드가 고르지 않게 분포되어 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

모양 설정

모양 매개변수는 모양을 정의합니다. 값 원 또는 타원일 수 있습니다. 그 중 원(circle)은 원을 의미하고, 타원(ellipse)은 타원을 의미합니다. 기본값은 타원입니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 形状</h3>

<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div>

<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

예제 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

다양한 크기 키워드 사용

크기 매개변수는 그라데이션의 크기를 정의합니다. 다음 네 가지 값일 수 있습니다.

  • 예 

    • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}

#grad3 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}

#grad4 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 不同尺寸大小关键字的使用</h3>

<p><strong>closest-side：</strong></p>
<div id="grad1"></div>

<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>

<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

  • 예제 실행»

    온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

  • 반복 방사형 그라디언트

    repeating-radial-gradient() 함수는 방사형 그라디언트를 반복하는 데 사용됩니다.

  • 예 

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
    background: 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>

    • 인스턴스 실행 »

    온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요