linear-gradient와radial-gradient
위의 선형 그래디언트 효과를 얻으려면 CSS3 스타일을 정의합니다.
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/-moz-linear-gradient에는 세 개의 매개 변수가 있다.첫 번째 매개 변수는 선형이 점차적으로 변하는 방향을 나타낸다. top는 위에서 아래로, left는 왼쪽에서 오른쪽으로, lefttop로 정의되면 왼쪽 상단에서 오른쪽 하단이다.두 번째 및 세 번째 매개변수는 각각 시작점 색상과 끝점 색상입니다.그것들 사이에 더 많은 매개 변수를 삽입해서 여러 가지 색의 점차적인 변화를 나타낼 수도 있다.
- 웹키트-gradient는 웹키 엔진이 점차적인 변화를 실현하는 매개 변수로 모두 5개가 있다.
첫 번째 매개 변수는 점차적인 형식 (type) 을 나타냅니다. linear (선형 점차적) 이나radial (지름방향 점차적) 일 수 있습니다.
두 번째 매개변수와 세 번째 매개변수는 그라데이션 시작점과 끝점을 나타내는 값 쌍입니다.이 값은 좌표 형식으로 표시할 수도 있고 관건적인 값으로 표시할 수도 있다. 예를 들어lefttop(왼쪽 상단)과leftbottom(왼쪽 하단)도 있다.
네 번째와 다섯 번째 매개 변수는 각각 두 개의color-stop 함수이다.color-stop 함수는 두 개의 매개 변수를 받아들인다. 첫 번째는 점차적인 위치를 나타내고 0은 기점이며 0.5는 중점이고 1은 끝점이다.두 번째는 점의 색상을 나타냅니다.
IE 필터를 사용하여 그래디언트를 만듭니다.startColorstr는 시작점 색상을, endColorstr는 끝점 색상을 나타냅니다.GradientType은 그래디언트 유형, 0은 기본값, 수직 그래디언트, 1은 수평 그래디언트를 나타냅니다.
선형 그래디언트는 from() 및 to() 방법을 사용하여 변환 색상 점을 지정합니다.
background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));선형 그래디언트는 여러 변환 점이 같은 위치에 있습니다.
background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));레이디얼 그래디언트의 종합적인 효과 시연:
background: -moz-radial-gradient(30px 30px, circle farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 30%),
-moz-radial-gradient(50px 70px, circle farthest-corner, #F30 0%, rgba(255, 159, 34, 0) 60%),
-moz-radial-gradient(80px 10px, circle farthest-corner, #03F 0%, rgba(222, 255, 0, 0) 80%);
background:-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));circle farthest-corner 원형 점차적 변화,ellipse farthest-corner 타원 점차적 변화
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
