CSS3 색상 그라디언트: CSS3에서 배경색 그라디언트를 구현하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS3 색상 그라디언트: CSS3에서 배경색 그라디언트를 구현하는 방법은 무엇입니까?

不言

풀어 주다： 2018-09-15 13:42:20

원래의

13403명이 탐색했습니다.

웹페이지의 아름다움을 표현하기 위해 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 배경색 그라데이션 효과는 다음과 같습니다.

CSS3 색상 그라디언트: 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 배경색 그라데이션 효과는 다음과 같습니다: