CSS3에서 선형 그래디언트 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS3에서 선형 그래디언트 효과를 얻는 방법

藏色散人

풀어 주다： 2021-04-20 15:39:50

원래의

6620명이 탐색했습니다.

CSS3에서 선형 그라디언트 효과를 얻는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 div를 만들고 마지막으로 "linear-gradient" 속성을 사용하여 선형 그라디언트 효과를 얻습니다.

CSS3에서 선형 그래디언트 효과를 얻는 방법

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS3는 CSS(Cascading Style Sheets) 기술의 업그레이드 버전입니다. CSS3 속성을 사용하면 더욱 멋진 페이지 효과를 얻고 배경색의 선형 그라데이션 효과와 같은 웹사이트 콘텐츠를 풍부하게 만들 수 있습니다!

이제 일반적인 CSS3 그라데이션 효과를 소개하겠습니다.

우선, CSS3는 두 가지 유형의 그라디언트, 즉 선형 그라디언트와 방사형 그라디언트를 정의한다는 점을 모두가 알아야 합니다.

이 섹션에서는 먼저 선형 그라데이션에 중점을 둡니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3创建CSS3에서 선형 그래디언트 효과를 얻는 방법</title>
    <style type="text/css">
        .container{
            text-align:center;
            padding:20px 0;
            width:960px;
            margin: 0 auto;
        }

        .container div{
            width:200px;
            height:150px;
            display:inline-block;
            margin:2px;
            color:#ec8007;
            vertical-align: top;
            line-height: 230px;
            font-size: 20px;
        }

        .linear{
            background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="linear">Linear线性渐变</div>
</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS3에서 선형 그래디언트 효과를 얻는 방법

위 그림과 같이 색상 #4b6c9c에서 #5ac4ed로 전환되는 선형 그라데이션입니다.

또는 색상 전환을 #9492ff에서 #ccccff로 설정하면 효과는 다음과 같습니다.

CSS3에서 선형 그래디언트 효과를 얻는 방법

css3의 linear-gradient 속성은 선형 그라데이션으로 이미지를 생성하는 것을 의미합니다.

기본적으로 선형 그라데이션 선형 그라데이션은 위에서 아래로 전환됩니다.

물론 그라데이션 방향은 아래/위/왼쪽/오른쪽/대각선일 수도 있고 각도를 정의할 수도 있습니다.

구문은 다음과 같습니다.

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

로그인 후 복사

첫 번째 매개변수는 선형 그래디언트의 방향을 나타내고, 두 번째 매개변수는 전환의 시작 색상을 나타내며, 세 번째 매개변수는 전환의 색상을 나타냅니다.

참고: Internet Explorer 9 및 이전 버전은 그라디언트를 지원하지 않습니다.

이 글은 선형 그래디언트 효과를 얻기 위한 css3 방법에 관한 것입니다. 매우 간단하고 이해하기 쉽습니다. 이 글이 필요한 친구들에게 도움이 되기를 바랍니다.

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