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 중국어에 주목하세요. 홈페이지기타관련 기사!
관련 읽기:
html에서 절대 경로와 상대 경로를 사용하는 방법HTML5의 Canvas에서 일반적으로 사용되는 그리기 기술
html 텍스트를 세로로 표시하는 방법위 내용은 CSS3에서 전환 그라디언트 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
