CS3- - 색상의 그라데이션 구현

우리가 페이지를 설정할 때 미관을 위해 표시된 페이지의 색이 한 중의 색에서 다른 색으로 바뀔 수 있으므로 CSS3의 점차적인 변화로 실현해야 한다.
이전에 우리는 항상 그림을 삽입하는 방법을 통해 이러한 효과를 실현했는데, 지금은 CSS3 점차적 변화(gradients)를 사용하여 이렇게 점차적 변화의 효과가 더욱 좋아 보인다.
CSS3 그래디언트(Gradients): 그래디언트의 유형은 선형 그래디언트와 지름 그래디언트 두 가지가 있습니다.
1. 선형 그래디언트(Linear Gradients): 아래로, 위로, 왼쪽, 오른쪽, 그리고 대각 방향의 그래디언트를 포함한다.
구문:

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

매개 변수:direction---점차적인 방향을 정합니다. 기본값은 위에서 아래로 점차적인 것입니다.

color-stop1--시작하는 색깔;
color-stop2,.......---과도 색상;
첫 번째 면은 왼쪽에서 오른쪽으로 그라데이션하는 예를 들어 왼쪽에서 시작하는 선형 그라데이션을 실현하고 시작은 파란색이며 천천히 빨간색으로 전환한다.

<style>
#grad {
     background: linear-gradient(to right, to right, red,orange,yellow,green,blue,indigo,violet);  
}
</style>

<body>
<div id="grad"></div>
</body>

2. 사용 각도 현실 점차적: 장점은 점차적인 방향에서 더 많은 통제를 할 수 있다는 것이다.

구문:

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

매개 변수:angle----각도:수평선과 점변선 사이의 각도를 가리키며 시계 반대 방향으로 계산한다.

각도의 그라데이션은 다음과 같습니다.

<style>
#grad1 {
    background: linear-gradient(0deg, red, blue); 
}

#grad2 {
    background: linear-gradient(90deg, red, blue); 

#grad3 {
    background: linear-gradient(180deg, red, blue); 
}

#grad4 {
    background: linear-gradient(-90deg, red, blue);*/
}
</style>

<body>
<h3>     -        </h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
</body>

3. 투명도를 사용하여 점차적인 변화를 실현한다(Transparency): 옅어지는 효과를 약화시키고 투명도를 추가할 수 있으며 rgba() 함수를 사용하여 색의 노드를 정의한다.
예:

<style>
#grad {
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
}
</style>

<body>
<div id="grad"></div>
</body>

상기 코드에서 rgba() 함수의 마지막 매개 변수는 0에서 1까지의 값으로 색의 투명도를 정의할 수 있다. 0은 완전히 투명하고 1은 완전히 불투명하다.
4.레이디얼 그래디언트(Radial Gradients): 중심에 의해 정의됩니다.
구문:

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

매개 변수:center - 기본적으로 중심에서 점차적으로 변합니다.
shape size - 기본적으로 원형입니다.
start-color: 점차적으로 시작되는 색깔;
start-color: 점차적으로 끝나는 색;
다음 예: 레이디얼 그라데이션 - 색상 결점이 고르게 분포되지 않습니다.

<style>
#grad {
    background: radial-gradient(ellipae， red 5%, green 15%, blue 60%);
}
</style>

<body>
<div id="grad"></div>
</body>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CS3- - 색상의 그라데이션 구현

좋은 웹페이지 즐겨찾기