碎片时间学编程css78创建棋盘背

创建棋盘背景图案

使用background-color设置白色背景。

background-image与两个linear-gradient()值一起使用。为每个人一个不同的角度来创建棋盘图案。

使用background-size指定图案的大小。

注意：元素的固定height和width仅用于演示目的。

预览效果如下所示：

HTML

divclass="checkerboard"/div

CSS

.checkerboard{width:px;height:px;background-color:#fff;background-image:linear-gradient(45deg,#%,transparent25%,transparent75%,#%,#),linear-gradient(-45deg,#%,transparent25%,transparent75%,#%,#);background-size:60px60px;background-repeat:repeat;}今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方

转载请注明：http://www.180woai.com/qfhqj/716.html