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

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.