css3背景渐变

1.线性渐变

    

    
    
box1
    
box2
    
box3
    
box4
    

        hello
    

 2.径向渐变

    

    
    
默认
    
调整径向圆心
    
通过左边调整中心位置
    
通过circle，调整为⚪ 
    
 圆半径是 100 50，圆心位置（120，60）

3.重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。

利用重复渐变实现网格效果

代码如下：

.box {
            width: 600px;
            height: 800px;
            padding: 20px;
            border: 1px solid black;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: repeating-linear-gradient(transparent 0, transparent 29px, #333 30px);
            background-clip: content-box;
 }