집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3에서 전환 그라디언트 효과를 만드는 방법

CSS3에서 전환 그라디언트 효과를 만드는 방법

php中世界最好的语言원래의: 2017-11-24 10:46:292642검색

CSS3에 전환 그라디언트 효과가 있다는 것은 누구나 알고 있으므로 이번에는 전환 그라디언트 사용 방법과 사용 기술을 알려 드리겠습니다.

CSS3 그라데이션을 사용하면 두 개 이상의 지정된 색상 사이의 부드러운 전환을 표시할 수 있습니다.

-webkit-gradient(그라디언트 유형, 시작점, 끝점, [시작 색상, 끝 색상, 전환 색상])

· 선형 그라디언트(선형 그라디언트) - 아래쪽/위/왼쪽/오른쪽/대각선 방향变 · 방사형 그라디언트 -중앙 정의에 따라 정의

선형-그라디언트(색상 1, 색상 2)

선형 그라데이션 사용: -webkit-radial-gradient(red, green, blue);

색상은 백분율에 따라 배포됩니다

배경: -webkit-radial-gradient(빨간색 5%, 녹색 15%, 파란색 60%);

사례 목록:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
#dv{
  border:1px solid #000;
  width:150px;
  height:150px;
  /*background: -webkit-radial-gradient(red, green, blue);
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);*/
  background: -webkit-radial-gradient(  red, yellow, green);
 }
</style>
<body>
<div id="dv">
 
</div>
</div>
</body>
</html>

전환 그라데이션을 사용하는 방법이 너무 많습니다. 더 흥미로운 정보를 보려면 PHP 중국어에 주목하세요. 홈페이지기타관련 기사!