如何使用CSS3模式？

Question

我如何使用這些模式？
http://lea.verou.me/css3patterns/#japanese-cube

這是我的失敗嘗試。 http://jsfiddle.net/ujmWH/

在tinkerbin也試過，結果一樣。

謝謝

Answer 1

您應該添加特定的供應商前綴，因爲CSS3屬性還不是標準的。你可以谷歌該主題了解原因。

添加-moz-到linear-grandient功能，你必須（在Firefox）：

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

你也應該補充-webkit-（Chrome和Safari瀏覽器）和-o-（歌劇）。

所以，完整的CSS將是：

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

你必須要麼添加所有的前綴，如洛倫佐-S指出，或使用-prefix免費電話：http://leaverou.github.com/prefixfree/（但先讀限制）