HTML에서 배경 방사형 그라데이션을 설정하는 방법

HTML에서는 방사형 그라데이션 기능을 사용하여 방사형 그라데이션을 설정할 수 있습니다. 요소의 배경 속성에 "배경:방사형 그라데이션(시작 위치, 모양, 크기, 색상, 색상, 색상)"을 추가하면 됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

방사형 그라데이션: 한 점에서 주변 색상으로의 전환입니다.

방사형 그래디언트는 그림과 같습니다.

구문: ​​(브라우저 접두어를 추가해야 함)

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center: 그래디언트의 시작점 위치. 기본값은 백분율입니다. 그래픽의 중심.

shape: 그라데이션의 모양으로 Ellipse는 타원을 나타내고 Circle은 원을 나타냅니다. 기본값은 타원입니다. 요소 모양이 사각형 요소인 경우 타원과 원이 동일하게 표시됩니다.

크기: 방사형 그래디언트의 크기 관련:

closest-side 가장 가까운 쪽

farthest-side 가장 먼 쪽

closest-corner 가까운 모서리

farthest-corner 가장 먼 모서리

구현 코드는 다음과 같습니다.

p{
            width:500px;
            height:300px;
            margin:40px auto;
            background:-webkit-radial-gradient(center,closest-corner,red,yellow,green);
        }

확장 정보:

선형 그라데이션: 한 방향에서 다른 방향으로 색상 변경

표준 모드 구문(브라우저 접두어 추가 없음):

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

설명: 방향의 기본값은 아래쪽입니다. 는, 위에서 아래로

stop: 색상의 분포 위치, 기본값은 균일 분포(균등 분포)입니다.

호환 모드 구문(브라우저 접두사 추가):

background:-webkit-linear-gradient(direction,color-stop1,color-stop2)

참고: 방향 값을 추가할 수 없습니다. 값은 색상을 나타냅니다. 위와 반대로 이 방향에서 그라디언트를 시작합니다.

stop: 색상의 분포 위치, 기본값은 균일한 분포(고른 분포)입니다.

그라디언트 방향: 위아래 또는 왼쪽 및 오른쪽 그라디언트가 있었습니다. 이전에 구현한 다음에는 대각선 그라데이션

1을 소개합니다. 왼쪽에서 오른쪽으로(상하 또는 왼쪽과 오른쪽으로 그라데이션)

2 왼쪽에서 오른쪽으로(대각선 그라데이션)

3. 그라디언트 선의 각도

예: 표준 모드: 40deg 40도

호환 모드: 90 - 40deg

선형 그라디언트: 색상 분포(색상 영역 크기):

선형-그라디언트(방향, 색상 1 20) %, 색상 2 30%, 색상 3)

~ 20% 이 위치는 여전히 색상 1이 20%를 벗어나 색상 2로 그라데이션을 시작합니다

코드는 다음과 같습니다.

div{
            width:500px;
            height:300px;
            margin:100px auto;
            background-image: -webkit-linear-gradient(left, red, yellow);
        }

권장 학습:html 비디오 튜토리얼

위 내용은 HTML에서 배경 방사형 그라데이션을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!