CSS3 패턴을 사용하는 방법?

Question

어떻게 이러한 패턴을 사용할 수 있습니까?
http://lea.verou.me/css3patterns/#japanese-cube

여기는 실패한 시도입니다. http://jsfiddle.net/ujmWH/

팅커빈에서도 마찬가지입니다.

감사합니다.

Answer 1

CSS3 속성이 아직 표준이 아니기 때문에 특정 공급 업체 접두사를 추가해야합니다. 당신은 이유에 대해 알고 그 주제를 구글 수 있습니다. (Firefox에서)

는 linear-grandient 기능에 -moz-을 추가하고, 당신은 : 당신은 (오페라)와 -o- (크롬과 사파리)도 -webkit-를 추가해야

http://jsfiddle.net/ujmWH/1/

.

그래서, 전체 CSS는 다음과 같습니다

당신은 로렌조-의 지적과 같이, 모든 접두사를 추가하거나 -prefix 무료 사용 중 하나가

body { 
    background-color:#556; 
    background-image: 
     -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-image: 
     -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-image: 
     -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-image: 
     linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-size: 80px 140px; 
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; 
} 

Answer 2

: http://leaverou.github.com/prefixfree/ (하지만 첫 번째 한계를 읽기)