CSS3에서 선형 그래디언트 효과를 얻는 방법
- 藏色散人원래의
- 2018-11-28 11:17:026608검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!