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

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

藏色散人

풀어 주다： 2021-04-21 15:14:35

원래의

7636명이 탐색했습니다.

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

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

이 문서의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

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

프런트엔드를 배우는 친구에게 그라데이션 효과는 확실히 낯선 것이 아닙니다. CSS3에는 선형 그래디언트와 방사형 그래디언트가 있다는 것을 누구나 알아야 합니다. 그리고 이전 글에서는 선형 그래디언트를 구현하는 CSS3 효과와 방사형 그래디언트 효과를 구현하는 CSS3에 대해서도 소개했습니다. 필요한 친구들은 먼저 참고하세요.

이 섹션에서는 반복적인 선형 그라디언트 효과를 얻기 위한 css3 방법을 주로 소개합니다.

반복되는 선형 그라데이션 효과는 어떤 친구들에게는 낯설게 들릴 수도 있지만, 우리 일상생활에서 흔히 볼 수 있는 그라데이션 효과이기도 합니다.

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

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>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;
        }
        .repeating-linear{
            background:repeating-linear-gradient(-45deg, #4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
        }
    </style>
</head>
<body>
<div class="container">
 <div class="repeating-linear">重复线性渐变</div>
</div>
</body>
</html>

로그인 후 복사

추천 참고 학습: "CSS3 Tutorial"

반복 선형 효과는 다음과 같습니다.

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

그림과 같이 선형 그라데이션 파란색과 흰색 스트립 간격의 효과. #4b6c9c에서 #5ac4ed까지, 흰색에서 흰색으로 전환하는 -45도 선형 그라데이션(예: 오른쪽 하단 모서리의 45도)에서 그라데이션을 반복합니다.

css3의 반복-선형-그라디언트() 함수 는 반복되는 선형 그라디언트 "이미지"를 만드는 데 사용됩니다.

구문:

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

로그인 후 복사

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

참고: Internet Explorer 9 및 이전 버전의 IE 브라우저는 그라데이션을 지원하지 않습니다.

이 글은 CSS3에서 반복되는 선형 그래디언트 효과를 구현하는 방법에 대한 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

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

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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