用css3径向渐变制作花纹背景

我们可以通过多种css3渐变的叠加制作各种各样好看的花纹

css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变.

制作格子花纹:

代码如下:

 .bg{
            width: 120px;
            height: 200px;
            background-color: #282828;
            background-image:
                    /*第一行*/
                    -webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
                    /*第二行*/
                    -webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
                    /*在两条底边加上黑色边边,增强立体感*/
                    -webkit-radial-gradient(black 15%,transparent 16%),
                    -webkit-radial-gradient(black 15%,transparent 16%);
            /*4个渐变的渐变位置*/
            background-position: 0 0px,8px 8px,0 1px,8px 9px;
            background-size: 16px 16px;
        }

制作原型相交花纹:

代码如下:

 .p20{
            width: 300px;
            height: 300px;
            background:#394057;
            background-image:
                                radial-gradient(closest-side, transparent 98%,rgba(0,0,0,1) 99%),
                                radial-gradient(closest-side,transparent 98%,rgba(0,0,0,1) 99%);
            /*上下两个圆错开相交*/
            background-position: 0 0px,40px 40px;
            background-size: 80px 80px;
        }