집 > 기사 > 웹 프론트엔드 > CSS 방사형 그래디언트를 사용하는 방법

CSS 방사형 그래디언트를 사용하는 방법

藏色散人원래의: 2020-12-22 09:58:452648검색

CSS 방사형 그라디언트 사용 방법: 먼저 HTML 샘플 파일을 만든 다음 div 블록을 만들고 마지막으로 CSS 스타일을 "배경:방사형-그라디언트()"로 추가하여 방사형 그라디언트 효과를 얻습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 동영상 튜토리얼"

방사형 그래디언트(방사형 그래디언트): 시작점부터 끝점까지 색상이 안쪽에서 바깥쪽으로 원형 그래디언트를 수행합니다.

Syntax

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

방사형 그라디언트 - 모양 설정

구문:

background:radial-gradient(shape,start-color,……,last-color);

지침:

shape 값은 두 개를 가질 수 있습니다.

원 - 원

타원 - 타원(기본값)

방사형 그라디언트 -크기 키워드

크기 키워드는 끝 색상을 결정하는 위치입니다. 기본값은 가장 먼 모서리입니다.

Grammar

background:radial-gradient(size,start-color,……,last-color);

size는 다음 네 가지 키워드를 사용합니다.

closest-side: 가장 가까운 쪽

farthest-side: 가장 먼 쪽

closest-corner: 가장 가까운 모퉁이

farthest-corner: 가장 먼 모퉁이

예:

div {
     width: 300px;
     height: 200px;
     /* Safari 5.1 - 6.0 */
     background: -webkit-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* Opera 11.6 - 12.0 */
     background: -o-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* Firefox 3.6 - 15 */
     background: -moz-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* 标准的语法 */
     background: radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
   }

방사형 그라데이션-원 중심 위치

구문:

background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

참고: 원 중심 위치의 표준 구문은 현재 주류 브라우저에서 제대로 지원되지 않으므로 브라우저 접두사 추가에 주의해야 합니다.

일반적인 사용 방법:

-webkit-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
-o-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
-moz-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

생각하기: 1. 그라디언트 색상 뒤에 있는 백분율 값의 의미는 무엇입니까?

3-12 프로그래밍 연습

친구 여러분, 저는 CSS3 방사형 그라디언트를 배웠습니다. 렌더링, 코드 추가, 구현:

(1) 중심(60% 40%)을 시작점으로 사용하여 원 중심에서 가장 가까운 가장자리, 가장 둥근 가장자리, 가장 가까운 모서리까지 4개의 방사형 그라데이션 효과를 설정합니다. 그리고 가장 둥근 모서리.

(2) 방사형 그래디언트의 모양은 원입니다

(3) 안쪽에서 바깥쪽으로 색상은 각각 빨간색, 노란색, 녹색, 파란색입니다

효과 그림은 다음과 같습니다

CSS 방사형 그래디언트를 사용하는 방법

Task

각각 4개의 요소를 제공합니다. 배경색 방사형 그라데이션 설정

(1) 방사형 그라데이션 크기를 각각 가장 가까운 가장자리, 가장 먼 가장자리, 가장 가까운 모서리, 가장 먼 모서리로 설정합니다

(2) 그라데이션 중심은 60%입니다. 그리고 40%

(3) 그라데이션의 모양은 원형입니다

(4) 그라데이션의 색상은 안쪽에서 바깥쪽으로 빨간색, 노란색, 녹색, 파란색입니다.

참조 코드:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>径向渐变</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            float: left;
            margin: 100px 0 0 100px;
        }
 
        /* 补充代码，分别写出4个元素的背景渐变效果 */
 
        .div1 {
            background: -webkit-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
        }
        .div2 {
            background: -webkit-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
        }
        .div3 {
            background: -webkit-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
        }
        .div4 {
            background: -webkit-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
        }
    </style>
</head>
 
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
 
</html>

Radial Gradual-Repeating Gradient

background:repeating-radial-gradient(color1 length|percent,color2 length|percent,……);

3-14 프로그래밍 연습

친구 여러분, CSS3 방사형 그래디언트에서 반복되는 그래디언트를 배웠습니다. 다음으로, 렌더링에 따라 코드를 작성하고, 반복되는 방사형 그래디언트를 구현하세요. 요소의 중심을 원점으로 하는 여러 개의 무지개 공으로 구성됩니다.

(1)에는 무지개의 7가지 색상이 필요합니다. 값 범위는 0%부터 시작하여 한 번에 5%씩 증가합니다. 예를 들어 빨간색은 0%, 주황색은 5%, 노란색은 10% 등입니다.

(2) 팁: 무지개 공의 색깔은 영어 단어로 표현 가능합니다

(3) 렌더링은 다음과 같습니다:

CSS 방사형 그래디언트를 사용하는 방법

참조 코드:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>径向渐变</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 补充代码 */
            background: -webkit-repeating-radial-gradient(closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Opera 11.6 - 12.0 */
            background: -o-repeating-radial-gradient( closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Firefox 3.6 - 15 */
            background: -moz-repeating-radial-gradient(closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* 标准的语法 */
            background: repeating-radial-gradient( closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
        }
    </style>
</head>
 
<body>
    <div></div>
 
</body>
 
</html>

위 내용은 CSS 방사형 그래디언트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 html background

성명：

이전 기사：CSS3를 사용하여 타이핑 효과 시뮬레이션(코드 예)다음 기사：CSS3를 사용하여 타이핑 효과 시뮬레이션(코드 예)