CSS에서 색상 그라디언트를 설정하는 방법
- 藏色散人원래의
- 2021-04-08 09:53:583275검색
CSS에서 색상 그라디언트를 설정하는 방법: 1. CSS3에서 "선형 그라디언트" 속성을 사용하여 선형 색상 그라디언트를 얻습니다. 2. CSS3에서 "방사형 그라디언트" 속성을 사용하여 방사형 색상 그라디언트를 얻습니다.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS3 그라데이션을 사용하면 두 개 이상의 지정된 색상 사이의 부드러운 전환을 표시할 수 있습니다.
CSS3은 두 가지 유형의 그라디언트를 정의합니다.
선형 그라디언트 - 아래쪽/위/왼쪽/오른쪽/대각선
방사형 그라디언트 그라디언트) - 중심으로 정의
선형 그라디언트를 만들기 위해 그라데이션을 사용하려면 색상 노드를 두 개 이상 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 시작점과 방향(또는 각도)도 설정할 수 있습니다.
css 선형 그라디언트 설정 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Rendering:
관련 권장 사항: "css3 색상 선형 그라디언트 속성: 여러 색상 간 부드러운 전환(완전한 코드 포함) "
위 내용은 CSS에서 색상 그라디언트를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS에서 공간을 숨기고 차지하는 방법다음 기사：CSS에서 공간을 숨기고 차지하는 방법