2012-12-04 2 views
0

Chrome에서 그라데이션이 표시되지 않지만 Safari 및 Firefox에서 작동합니다. 다음은 코드입니다.왜이 그라디언트 설정에서 Chrome이 작동합니까?

.accounts-form #auth-form { 
    background: -moz-linear-gradient(#FEFEFE, #F4F4F4) repeat scroll 0 0 #F4F4F4; 
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
    margin: 0; 
    padding: 0 0 40px; 
} 

문제의 원인이되는 라인은 다음과 같습니다. 나는 다른 사람들이 -webkit-gradient으로 문제를 겪고있는 것을 보았습니다. 단지 -moz-linear-gradient이 아닙니다.

+1

웹킷 브라우저 용으로 웹킷 그라디언트 스타일이 필요하지 않습니까? – Madbreaks

+0

그래디언트 선언이 그래디언트에 잘못 표시됩니다. 웹킷 접두어로 복사 한 경우 크롬이 질식하는 경우 놀라지 않을 것입니다. – cimmanon

답변

0

크롬에는 -webkit-gradient가 필요합니다. Chrome 10 이상에서는 내가 생각하는 일부 이전 버전과 약간 다른 -webkit-gradient를 사용합니다.

이 CSS3 그라디언트 생성기를 사용합니다. 생성 된 코드를 사용하는지 여부에 관계없이 각 브라우저에 필요한 모든 속성을 제공합니다. 다음은

http://www.colorzilla.com/gradient-editor/

1

구배가 배경 위에 적용되는 방법의 구문이다.

background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 

일반적으로 모든 브라우저 호환 공급 업체 접두사 코드를 완료하는 데 http://prefixr.com/를 통해 실행 후 기본 버전의 코드를 작성하는 것이 좋습니다.

관련 문제