웹페이지의 아름다움을 표현하기 위해 CSS3 배경색 그라데이션을 자주 사용합니다. 그러면 CSS3 배경색 그라데이션을 설정하는 방법은 무엇인가요? 이번 글에서는 CSS 색상 그라데이션 배경을 설정하는 방법을 소개하겠습니다.
우리가 알아야 할 것은 CSS3 그라디언트에는 css3 선형 그라디언트와 CSS3 방사형 그라디언트의 두 가지 유형이 있다는 것입니다. 배경색 그라디언트를 얻기 위해 이 두 가지 CSS3 그라디언트의 효과를 살펴보겠습니다.
1. CSS3 선형 그라데이션으로 설정된 배경색 그라데이션
우선 CSS3 선형 그라데이션에서 사용하는 속성이 선형 그라데이션이라는 것을 알아야 합니다.
구문: 선형 그라데이션(하단,colorStrat,colorEnd)
매개변수 의미:
첫 번째 매개변수는 그라데이션 방향
하단에서 하단으로 지정합니다. 오른쪽 아래에서 왼쪽에서 오른쪽으로; 왼쪽 아래에서 오른쪽 위로
아래에서 왼쪽 위로; 오른쪽 아래에서 왼쪽 위로; 왼쪽 아래에서 오른쪽 위에서 왼쪽으로
두 번째 매개변수는 그라디언트의 시작 색상을 지정합니다
세 번째 매개변수는 그라디언트의 끝 색상을 지정합니다
예 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>css3 배경색 그라데이션 효과는 다음과 같습니다.
2 CSS3 방사형 그라데이션으로 설정된 배경색 그라데이션
방사형 그라데이션은 중심으로 정의됩니다.
방사형 그래디언트를 생성하려면 최소 두 개의 색상 노드도 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 그라디언트의 중심, 모양(원형 또는 타원형) 및 크기도 지정할 수 있습니다. 기본적으로 그라디언트의 중심은 다음과 같습니다. center(중심점을 나타냄), 그래디언트의 모양은 타원(타원을 나타냄), 그래디언트의 크기는 가장 먼 모서리(가장 먼 모서리를 나타냄)입니다.
CSS3 방사형 그래디언트에 사용되는 속성은 방사형 그래디언트입니다.
구문: 배경: 방사형-그라디언트(위치의 모양 크기, 시작 색상, ..., 마지막 색상);
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>css3 배경색 그라데이션 효과는 다음과 같습니다:
이 글은 여기서 끝납니다. CSS3 그래디언트의 CSS3 선형 그래디언트 및 CSS3 방사형 그래디언트에 대한 자세한 내용은 css3 매뉴얼을 참조하세요.
위 내용은 CSS3 색상 그라디언트: CSS3에서 배경색 그라디언트를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!