CSS3에서 전환 그라디언트 효과를 만드는 방법
- php中世界最好的语言원래의
- 2017-11-24 10:46:292595검색
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으로 문의하세요.