css 网格背景

2022-10-28 131 阅读1分钟

代码

$line:#ededee;
$bg:#f8fafc;

.plaid {
    background:
        repeating-linear-gradient(90deg, transparent, transparent 50px,
            $line 52px),
        repeating-linear-gradient(0deg, transparent, transparent 50px,
            $line 52px);
    background-color: $bg;
}

效果

注意

background属性是一个简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

所以，如果background-color写在background之前，不会生效。

参考资料