CSS3에서 선형 그라디언트 효과를 얻는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 div를 만들고 마지막으로 "linear-gradient" 속성을 사용하여 선형 그라디언트 효과를 얻습니다.
이 기사의 운영 환경: 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>
효과는 다음과 같습니다.
위 그림과 같이 색상 #4b6c9c에서 #5ac4ed로 전환되는 선형 그라데이션입니다.
또는 색상 전환을 #9492ff에서 #ccccff로 설정하면 효과는 다음과 같습니다.
css3의 linear-gradient 속성은 선형 그라데이션으로 이미지를 생성하는 것을 의미합니다.
기본적으로 선형 그라데이션 선형 그라데이션은 위에서 아래로 전환됩니다.
물론 그라데이션 방향은 아래/위/왼쪽/오른쪽/대각선일 수도 있고 각도를 정의할 수도 있습니다.
구문은 다음과 같습니다.
background: linear-gradient(direction, color-stop1, color-stop2, ...);
첫 번째 매개변수는 선형 그래디언트의 방향을 나타내고, 두 번째 매개변수는 전환의 시작 색상을 나타내며, 세 번째 매개변수는 전환의 색상을 나타냅니다.
참고: Internet Explorer 9 및 이전 버전은 그라디언트를 지원하지 않습니다.
이 글은 선형 그래디언트 효과를 얻기 위한 css3 방법에 관한 것입니다. 매우 간단하고 이해하기 쉽습니다. 이 글이 필요한 친구들에게 도움이 되기를 바랍니다.
위 내용은 CSS3에서 선형 그래디언트 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!