다양한 엔진에서 CS3 그라데이션
9471 단어 css3
직선 그라데이션
background:-webkit-gradient(linear,left top,left bottom,from(cornflowerblue),top(whitesmoke))
color-stop 속성을 추가할 수 있습니다. 그 값은 백분수, 소수입니다.
background:-webkit-gradient(linear,left top,left bottom,from(cornflowerblue),top(whitesmoke)，color-stop(0.5,#000)，color-stop(0.6，blue));
지름 그래디언트(45,45)는 첫 번째 원의 좌표이고, 10은 반경(52,50)은 두 번째 원의 좌표이며, 30은 반경from()to()의 색상 값은 rgba() 형식으로 설정할 수 있다.
background: -webkit-gradient(radial,45,45,10,52,50,30,from(#000000),to(#CCCCCC),color-stop(90%,#00008B));*/
베코 엔진의 그라데이션 효과
선형 그래디언트
moz-linear-gradient(point( ， ， )，stop )
-moz-linear-gradient（red,blue)
-moz-linear-gradient（top left,red,blue)
다양한 색상 추가
-moz-linear-gradient（left,red,orange,purplr,green,bllur,indigo)
그래디언트를 각도로 회전할 수 있으며, 양수 값은 반시계 방향입니다.
-moz-linear-gradient(left 90deg,red,rgba(255,0,0,0));
Y축의 80%에 녹색 색표를 추가합니다
-moz-linear-gradient(top,blue,green 80%,organge);
4
* -moz-radial-gradient(red,yellow,blue);// ，
* -moz-radial-gradient(red 20%,yellow 40%,blue 60%);
* -moz-radial-gradient(bottom left,red,yellow,blue);
* -moz-radial-gradient(left,circle,red,yellow,blue);
* -moz-radial-gradient(ellipse cover ,red,yellow,blue);
///// ，
-moz-repeating-radial-gradient(circle,black,black 10%,white 10px,white 20px)；
-moz-repeating-radial-gradient(top left 60deg,black,black 10px,white 10px,white 20px);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
