그라디언트는 CSS3에 새로운 기능인가요?-프런트엔드 Q&A-php.cn

Gradient는 이미지를 대체하는 데 사용되는 CSS3의 새로운 이미지 유형입니다. CSS3는 두 가지 유형의 그래디언트를 정의합니다. 1. "linear-gradient()" 함수를 사용하여 정의된 선형 그래디언트 2. "radial-gradient()" 함수를 사용하여 정의된 방사형 그래디언트.

그라디언트는 CSS3에 새로운 기능인가요?

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

CSS3의 새로운 속성인 그라디언트는 무한한 잠재력을 가지고 있습니다.

1. 소개

Gradient는 이미지를 대체하는 데 사용되는 CSS3의 새로운 이미지 유형입니다.

페이지 로딩 속도를 높이고 대역폭 사용량을 줄입니다.
CSS3은 두 가지 유형의 그라디언트를 정의합니다.

선형 그라디언트 - 아래쪽/위/왼쪽/오른쪽/대각선

방사형 그라디언트 그라디언트) - 중심으로 정의
2. 선형 그라디언트

실제로 탐색 표시줄과 같은 그라디언트의 사용도 매우 일반적입니다.

background-image: linear-gradient(90deg,#0af,#0085ff)

로그인 후 복사

분명히 이것은 단색 배경보다 훨씬 더 좋아 보입니다.

물론 전환 효과가 필요하지 않은 경우도 있습니다.

    background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

로그인 후 복사

선형 그래디언트의 경우 선형 그래디언트 외에도 반복 선형 그래디언트도 있습니다.

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

로그인 후 복사

그래디언트가 그렇게 간단하지 않다는 것을 알 수 있습니다. .

여기서 어떤 사람들은 다른 트릭을 사용할 수 있는지 물어봐야 합니다. 먼저 그라데이션이 그림의 일종이라는 것을 이해하고 그림과 함께 사용되는 다른 CSS 속성이 무엇인지 생각해 봐야 합니다.

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;

로그인 후 복사

이 예를 통해 그라디언트를 사용하는 아이디어가 더욱 개방적이 됩니다. 하지만 여기서 주목해야 할 사항이 한 가지 더 있습니다.

여러 그래디언트를 선언할 때 먼저 선언된 그래디언트가 사용자에게 더 가깝습니다. (여기서는 일반적으로 투명을 사용하여 덮는 문제를 고려해야 합니다.)

마찬가지로 그라디언트에도 애니메이션을 적용할 수 있습니다.

    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }

로그인 후 복사

3. 방사형 그라디언트

방사형 그라디언트는 중심으로 정의됩니다.

방사형 그래디언트를 생성하려면 최소 두 개의 색상 노드도 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 그라디언트의 중심, 모양(원형 또는 타원형) 및 크기도 지정할 수 있습니다. 기본적으로 그라디언트의 중심은 중심(중심점을 의미)이고 그라디언트의 모양은 타원(타원을 의미)이며 그라디언트의 크기는 가장 먼 모서리(가장 먼 모서리를 의미)입니다.

Syntax

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

로그인 후 복사

ValueDescriptionshape원 유형 결정:ellipse(기본값): 타원의 방사형 그라데이션을 지정합니다. size 그라데이션의 크기를 정의합니다. 가능한 값: farthest-corner(기본값): 중심에서 방사형 그라데이션의 반경 길이를 지정합니다. 원의 중심에서 가장 먼 모서리 top: 상단을 방사형 그래디언트 원 중심의 세로 좌표 값으로 설정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 形状</h3>

<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div>

<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

로그인 후 복사

IV. Summary 최근 쿠폰이 다양하니, 그라데이션 지식을 활용해 쿠폰을 만들어볼까요?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 300px;
				height: 120px;
				background: radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
					linear-gradient(90deg, transparent 10px, rgb(247, 245, 201) 10px);
				background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%;
				background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

로그인 후 복사

(학습 영상 공유:

css 영상 튜토리얼 그라디언트는 CSS3에 새로운 기능인가요? )

위 내용은 그라디언트는 CSS3에 새로운 기능인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!


	원: 원의 방사형 그라데이션을 지정합니다.
	closest-side: 원의 중심에서 중심에 가장 가까운 면까지 방사형 그래디언트의 반경 길이를 지정합니다. closest-corner: 반경 길이를 지정합니다. 원의 중심에서 중심에 가장 가까운 모서리까지의 방사형 그라디언트 가장 먼 쪽: 원의 중심에서 중심에서 가장 먼 쪽까지의 그라디언트 위치를 정의하려면 방사형 그라디언트의 반경 길이를 지정하세요. . 가능한 값: center (기본값): 중앙에 있는 방사형 그라데이션 원 중심의 세로 좌표 값을 설정합니다.
	bottom : 하단을 방사형 그래디언트 원 중심의 세로 좌표 값으로 설정합니다. start-color, ..., last-color 은 그라디언트의 시작 색상과 끝 색상을 지정하는 데 사용됩니다. 예:

그라디언트는 CSS3에 새로운 기능인가요?

1. 소개

background-image: linear-gradient(90deg,#0af,#0085ff)로그인 후 복사

background-image: linear-gradient(90deg,#0af,#0085ff)
로그인 후 복사