CSS3 그라디언트

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

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

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

----방사형 그래디언트 - 중심으로 정의

CSS3 선형 그라데이션

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

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

선형 그라데이션 - 왼쪽에서 왼쪽으로 맞아

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
  div{
     width: 300px;
     height: 300px;
     margin: 0 auto;
     border: 1px solid;
     background: -webkit-linear-gradient(left,red,green,white,orange, blue); 
    }  
</style>
</head>
  <body>
  <div></div>
 </body>
</html>

선형 그라데이션 - 위에서 아래로

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
  div{
     width: 300px;
     height: 300px;
     margin: 0 auto;
     border: 1px solid;
     background: -webkit-linear-gradient(red,green,white,orange, blue); 
    }  
</style>
</head>
<body>
  <div></div>
</body>
</html>

선형 그라데이션 - 대각선

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
  div{
     width: 300px;
     height: 300px;
     margin: 0 auto;
     border: 1px solid;
     background: -webkit-linear-gradient(45deg, red, white, blue); 
    }  
</style>
</head>
<body>
  <div></div>
</body>
</html>

각도 그라데이션 사용

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

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

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

그러나 많은 브라우저(Chrome, Safari, fiefox 등)는 이전 표준을 사용하므로 주의하세요. 즉, 0deg는 왼쪽 오른쪽 그라데이션의 경우 90deg는 아래에서 위로 그라데이션을 생성합니다. 변환 공식 90 - x = y 여기서 x는 표준 각도이고 y는 비표준 각도입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    #grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, green, blue); /* 标准的语法（必须放在最后） */
    }
    #grad2 {
    height: 100px;
    background: -webkit-linear-gradient(45deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(45deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(45deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(45deg, green, blue); /* 标准的语法（必须放在最后） */
    }
    #grad3 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(90deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(90deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(90deg, green, blue); /* 标准的语法（必须放在最后） */
    }
    #grad4 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(-90deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(-90deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(-90deg, green, 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;">45deg</div><br>
    <div id="grad3" style="color:white;text-align:center;">90deg</div><br>
    <div id="grad4" style="color:white;text-align:center;">-90deg</div>
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

여러 색상 노드 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    #grad1 {
        height: 200px; 
          width: 300px;
        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;
          width: 300px;
        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;
          width: 300px;
        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>颜色结点（均匀分布）</h3>
    <div id="grad1"></div>
    <h3>颜色结点（均匀分布）</h3>
    <div id="grad2"></div>
    <h3>颜色结点（不均匀分布）</h3>
    <div id="grad3"></div>
</body>
</html>

참고: 백분율을 지정하지 않으면 색상 노드가 표시되지 않습니다. 자동으로 균등하게 분배됩니다.

투명도 사용

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
#grad1 {
    height: 200px;
      width: 300px;
    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>
  <div id="grad1"></div>
</body>
</html>

선형 그래디언트 반복

선형 그래디언트를 반복하려면 repeating-linear-gradient() 함수를 사용합니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
#grad1 {
    height: 200px;
      width: 400px;
    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>
  <div id="grad1"></div>
</body>
</html>

CSS3 방사형 그라데이션

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

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

방사형 그라디언트 - 고르게 분포된 색상 노드(기본값)

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

방사형 그라디언트 - 고르지 않게 분포된 색상 노드

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

다양한 크기 키워드 사용

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

가장 가까운 쪽

가장 먼 쪽

가장 가까운 쪽

가장 먼 쪽

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
#grad2 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
#grad3 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
#grad4 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<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>
</body>
</html>

반복 방사형 그라디언트

repeating-radial-gradient() 함수를 사용하여 방사형 그라디언트를 반복합니다

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

다음 섹션

새로운 파일

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css"> 
 div{
 width: 300px;
 height: 300px;
 margin: 0 auto;
 border: 1px solid;
 background: -webkit-linear-gradient(45deg, red, white, blue); 
 } 
</style>
</head>
<body>
 <div></div>
</body>
</html>

제출하다 코드 재설정

자동운전

전체 화면