집 > 기사 > 웹 프론트엔드 > CSS3에서 색상 그라데이션 효과를 얻는 방법

CSS3에서 색상 그라데이션 효과를 얻는 방법

王林원래의: 2020-11-16 14:36:373507검색

css3에서 색상 그라디언트 효과를 얻는 방법: 선형 그라디언트 기능과 방사형 그라디언트 기능을 사용하여 [선형-그라디언트(노란색, 녹색)]와 같은 선형 그라디언트 효과와 방사형 그라디언트 효과를 각각 얻을 수 있습니다.

CSS3 그라디언트에는 CSS3 선형 그라디언트와 CSS3 방사형 그라디언트의 두 가지 유형이 있습니다.

(학습 영상 공유: css 영상 튜토리얼)

1. 선형 그라데이션 색상 그라데이션

기능:

linear-gradient() 함수는 두 가지 이상의 색상의 선형 그라데이션을 나타내는 그림을 만드는 데 사용됩니다.

구문:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

값:

direction 각도 값을 사용하여 그라데이션의 방향(또는 각도)을 지정합니다.
color-stop1, color-stop2,... 그라데이션의 시작 및 끝 색상을 지정하는 데 사용됩니다.

예:

<!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>

2. 방사형 그래디언트

함수

radial-gradient() 함수는 방사형 그래디언트를 사용하여 "이미지"를 생성합니다.

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

방사형 그래디언트를 만들려면 두 가지 정지 색상을 설정해야 합니다.

구문:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

값:

1. 모양 원 유형 결정

타원(기본값): 타원의 방사형 그라데이션을 지정합니다.
원: 원의 방사형 그라데이션을 지정합니다.

2, 크기 그라데이션의 크기를 정의합니다. 가능한 값:

farthest-corner(기본값): 방사형 그라데이션의 반경 길이를 지정합니다. 원의 중심에서 원의 중심에서 가장 먼 각도
closest-side: 원의 중심에서 원의 중심에 가장 가까운 쪽까지 방사형 그래디언트의 반경 길이를 지정합니다
closest-corner: 원의 중심에서 원의 중심에 가장 가까운 쪽까지 방사형 그래디언트의 반경 길이를 지정합니다. 원의 중심에 가장 가까운 각도
farthest-side: 반경 길이를 지정합니다. 원의 중심에서 원의 중심에서 가장 먼 쪽까지의 방사형 그래디언트

3. 위치는 그래디언트의 위치를 정의합니다. 가능한 값:

center(기본값): 중앙에 있는 방사형 그라데이션 원 중심의 세로 좌표 값을 설정합니다.
top: 상단을 방사형 그래디언트 원 중심의 세로 좌표 값으로 설정합니다.
bottom: 하단을 방사형 그래디언트 원 중심의 세로 좌표 값으로 설정합니다.

4. start-color, ..., last-color는 그라디언트의 시작 색상과 끝 색상을 지정하는 데 사용됩니다.

예:

<!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에서 색상 그라데이션 효과를 얻는 방법

관련 기사