찾다

집  >  기사  >  웹 프론트엔드  >  그라디언트는 CSS3에 새로운 기능인가요?

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

青灯夜游
青灯夜游원래의
2021-12-14 17:49:591498검색

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  최근 쿠폰이 다양하니, 그라데이션 지식을 활용해 쿠폰을 만들어볼까요? 
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
	93f0f5c25f18dab9d176bd4f6de5d30e
		4d0d87937f6c83b675e896c64d3eb7c9
		c9ccee2e6ea535a969eb3f532ad9fe89
			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;
			}
		531ac245ce3e4fe3d50054a55f265927
	9c3bca370b5104690d9ef395f2c5f8d1
	6c04bd5ca3fcae76e30b72ad730ca86d
		dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
	36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
    원: 원의 방사형 그라데이션을 지정합니다.
    closest-side: 원의 중심에서 중심에 가장 가까운 면까지 방사형 그래디언트의 반경 길이를 지정합니다.
  • closest-corner: 반경 길이를 지정합니다. 원의 중심에서 중심에 가장 가까운 모서리까지의 방사형 그라디언트
  • 가장 먼 쪽: 원의 중심에서 중심에서 가장 먼 쪽까지의 그라디언트 위치를 정의하려면 방사형 그라디언트의 반경 길이를 지정하세요. . 가능한 값:
  • center
    • (기본값): 중앙에 있는 방사형 그라데이션 원 중심의 세로 좌표 값을 설정합니다.
bottom
    : 하단을 방사형 그래디언트 원 중심의 세로 좌표 값으로 설정합니다.
  • start-color, ..., last-color
    • 은 그라디언트의 시작 색상과 끝 색상을 지정하는 데 사용됩니다.
예:

(학습 영상 공유:

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

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

html5 css css3 position
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3에서 회전 효과를 얻는 데 사용되는 속성은 무엇입니까?다음 기사：CSS3에서 회전 효과를 얻는 데 사용되는 속성은 무엇입니까?

관련 기사

더보기