這里是一個什么樣的格仔背景看起來在圖形設計編輯器，如Photoshop或Illustrator的翻版。 (所有的CSS)

.checkered{

height: 240px;

background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;

background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;

background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;

background-repeat: repeat, repeat;

background-position: 0px 0, 5px 5px;

-webkit-transform-origin: 0 0 0;

transform-origin: 0 0 0;

-webkit-background-origin: padding-box, padding-box;

background-origin: padding-box, padding-box;

-webkit-background-clip: border-box, border-box;

background-clip: border-box, border-box;

-webkit-background-size: 10px 10px, 10px 10px;

background-size: 10px 10px, 10px 10px;

-webkit-box-shadow: none;

box-shadow: none;

text-shadow: none;

-webkit-transition: none;

-moz-transition: none;

-o-transition: none;

transition: none;

-webkit-transform: scaleX(1) scaleY(1) scaleZ(1);

transform: scaleX(1) scaleY(1) scaleZ(1);

}

你可以在我的筆看到一個工作示例here

總結

以上是生活随笔為你收集整理的css html 方格,使用CSS创建方格背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。