最近在工作中，遇到需要繪制網(wǎng)格線的效果，如下圖：我嘗試用了三種方式去做，第一種方式是用linear-gradient()做的，首先，

　　Html：

　　網(wǎng)格線效果的Css：

　　background：-webkit-linear-gradient(top，transparent180px，#c3c3c30)，-webkit-linear-gradient(left，transparent306px，#c3c3c30);

　　background-size：307px181px;

　　考慮兼容性，可以加上一些前綴：

　　-moz-linear-gradient、-ms-linear-gradient、-webkit-linear-gradient

　　瀏覽器支持如下：-webkit-linear-gradient(top，transparent180px，#c3c3c30)和-webkit-linear-gradient(left，transparent306px，#c3c3c30);用意是是上面180px設(shè)置了透明的，左邊開始306px設(shè)置了透明的，然后水平方向限制只顯示307px，在垂直方向設(shè)置限制只顯示181px的范圍，加上background默認(rèn)了repeat的，那么就能到想要的網(wǎng)格線了，不過此次我需要做的效果不能用這個(gè)，因?yàn)檫@里設(shè)置了固定的值，意味了網(wǎng)格的大小固定了，下面兩種方式可以得到根據(jù)屏幕大小變化，網(wǎng)格數(shù)不變而自適應(yīng)的網(wǎng)格。

　　第二種方式需要在p.grid里面添加多個(gè)span，一個(gè)span代表一個(gè)網(wǎng)格，用grid布局做，grid-gap是設(shè)置網(wǎng)格布局中列和行之間的間距大小，grid-template-columns是設(shè)置網(wǎng)格布局中的列寬，grid-template-rows是設(shè)置網(wǎng)格布局中的行高，用網(wǎng)格布局做這個(gè)網(wǎng)格線，需要在p.grid的子級(jí)設(shè)置邊框。Css：

　　.grid{

　　width：100vw;

　　height：100vh;

　　grid-template-columns：autoautoautoautoauto;

　　grid-template-rows：autoautoautoauto;

　　display：grid;

　　grid-gap：0;

　　}

　　.gridspan{

　　opacity：0.25;

　　border：#FFFFFFsolid1px;

　　margin-left：-1px;

　　margin-top：-1px;

　　}

　　不過整個(gè)容器最外邊我不需要有邊框，于是我選擇了用第三種方式做。第三種也是需要在p.grid里面添加多個(gè)span，一個(gè)span代表一條線，然后，布滿屏幕的網(wǎng)格就是由一條一條線組成，例如：上面需要做的效果，就是四行五列，需要7條線，那么設(shè)置7個(gè)span，前面四個(gè)span的代表的是四條豎線，后三個(gè)是三條橫線，然后設(shè)置如下的樣式就能得到想要的效果。

　　Css：

　　.grid{

　　position：absolute;

　　top：0;

　　width：100vw;

　　height：100vh;

　　z-index：1;

　　pointer-events：none;

　　}

　　gridspan{

　　display：block;

　　position：absolute;

　　background：rgba(255，255，255，0.25);

　　}

　　.gridspan：nth-child(1)，.gridspan：nth-child(2)，.gridspan：nth-child(3)，.gridspan：nth-child(4){

　　bottom：0;

　　width：1px;

　　height：100%;

　　}

　　.gridspan：nth-child(1){

　　}

　　.gridspan：nth-child(2){

　　}

　　.gridspan：nth-child(3){

　　}

　　.gridspan：nth-child(4){

　　}

　　.gridspan：nth-child(n+5){

　　height：1px;

　　width：100%;

　　}

　　.gridspan：nth-child(5){

　　top：calc(1*25vh-.5px);

　　}

　　.gridspan：nth-child(6){

　　top：calc(2*25vh-.5px);

　　}

　　.gridspan：nth-child(7){

　　top：calc(3*25vh-.5px);

　　}