CSS之linear-gradiend ——实现网格背景效果

要实现效果图：

第一步：从上到下画直线。

第二步：从左到右画直线。

其中body代码：

css代码：

即设置div.box的背景颜色为orange，再设置其内部div的linear-gradient的css属性值。实现网格效果。

下面更改 .one 的 linear-gradient 属性值一步步分析（.one 的height属性值不变）：

方法一：

第一步：从上到下画直线。

当 .one 的 linear-gradientcss样式为

background: -webkit-linear-gradient(top, transparent 40px, yellow 41px);

的时候。    

效果图：     

该css属性值的意思可以解释为：top：从上到下开始，0~40px处为transparent透明，从41px开始背景颜色为yellow，因为 .box 的背景颜色是orange，故透明的时候即仍然是orange色。就形成了上边的效果图。

若想实现一条直线效果。那么我们可以让前边40px透明后，再让41px之后的42px开始也变成透明。即只设置41px的时候背景颜色yellow。在41px处形成一条1px的黄色直线。

此时可以使用background-size属性。background-size 属性规定背景图片的大小。

当 .one 的 linear-gradientcss样式为

background: -webkit-linear-gradient(top, transparent 40px, yellow 41px);

background-size: 41px 41px;

background-repeat: no-repeat;

的时候。     

效果图：     

即规定背景图像的宽高为41px的尺寸。即规定背景图片的大小在宽度和高度为41px为止的时候借宿。那么yellow背景色将只留在41px处，之后的yellow背景色都不再存在。

为了便于观察我们刚刚将背景设为不平铺，而linear-gradient默认平铺，此时再将background-repeat属性去掉，效果图将变为：

可以发现刚刚不平铺的时候只有下边有1px的黄线，右边没有。那是因为设置的linear-gradient属性值是从上到下的。现在开始画从左到右的竖线。即加一个从左到右的linear-gradient属性值。

第二步：从左到右画直线。

当 .one 的 linear-gradientcss样式为

background: -webkit-linear-gradient(top, transparent 40px, yellow 41px),-webkit-linear-gradient(left, transparent 40px, yellow 41px);

 background-size: 41px 41px;

的时候。网格效果就实现了。

该css 意思为：从上边开始，0~40px 之间为透明，到40px结束后为止起始背景颜色是yellow，当到达41px的时候结束，（即yellow部分宽度仅为1px）。

从左边边开始，0~40px 之间为透明，到40px结束后为止起始背景颜色是yellow，当到达41px的时候结束。

最后以宽度41px，告诉41px 分割背景图。默认.one的div背景平铺。

如果想让直线宽度变宽。可以更改 background-size的属性值。最低41px，低于41px直线消失，41px递增，直线宽度递增。

如果想让改变网格大小。可以更改transparent 后边的值和yellow 后边的值。如将 “transparent 40px” 改为 “transparent 30px“，将 “yellow 41px” 改为 “yellow 31px“，同时将 background-size 属性值改为宽高31px。

网格变小的效果图：

如想让间隔变大可以再更改background-size 的属性值。

如果想让网格横竖线颜色不一。则从上到下和从左到右的颜色值可以更改。

如该案例css样式为：

效果图：

方法二：

height: inherit;
    background: linear-gradient(90deg,rgba(14,49,63,.5) 3%,transparent 0),
          linear-gradient(rgba(14,49,63,.5) 3%,transparent 0);
    background-size: 40px 40px;