【CSS3】条纹与方格斜纹背景的实现实例页面

admin

CSS代码：
.stripes {
    height: 250px;
    width: 375px;
    float: left;
   
    margin: 10px;
   
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px; /* 控制条纹的大小 */
   
    -moz-box-shadow: 1px 1px 8px gray;
    -webkit-box-shadow: 1px 1px 8px gray;
    box-shadow: 1px 1px 8px gray;
}

.horizontal {
    background-color: #0ae;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.vertical {
    background-color: #f90;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.picnic {
    background-color:white;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
                      -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
    background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
                      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
                      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
                      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

.angled {
    background-color: #ac0;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                            color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                            color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                            to(transparent));
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
}

.angled-135 {
    background-color: #c16;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
                            color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                            color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                            to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
}

.checkered {
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
    background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, #555 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
                      -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
                      -o-linear-gradient(45deg, transparent 75%, #555 75%),
                      -o-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
                      linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
                      linear-gradient(45deg, transparent 75%, #555 75%),
                      linear-gradient(-45deg, transparent 75%, #555 75%);
}
HTML代码：
<div class="horizontal stripes"></div>
<div class="vertical stripes"></div>
<div class="picnic stripes"></div>
<div class="angled stripes"></div>
<div class="angled-135 stripes"></div>
<div class="checkered stripes"></div>

admin

body{
background: radial-gradient(circle, white 10%, transparent 10%),
  radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size:100px 100px;
}


body{
        background-color: white;
        background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
        background-size:100px 100px;
        background-position: 0 0, 50px 50px;
}

admin

图片为放大后的效果，与上图有所区别，注意偶行为单色；即奇行黑白相间，偶行全黑效果。
DIV：<div class="grid skin"></div>
.grid{background-size: 2px 2px; /* 控制条纹的大小 */}
.skin{background-image: linear-gradient(90deg, black 25%, transparent 25%, transparent 75%, black 75%, black),linear-gradient(0deg, black 25%, transparent 25%, transparent 75%, black 75%, black);}

模板：xyql，案例xinyi-ql

admin

原文出处：http://www.cnblogs.com/shadow-wolf/p/6868353.html
如以下CSS有误，以原文出处为准。


body {
    background:linear-gradient(#51B0E7 50%, #006084 50%);
    background-size:100% 20px;
}


body {
    background:#FFF;
    margin:50px;
    background:linear-gradient(45deg, #3498DB 50%, #2980B9 50%);
    background-size:30px 30px;
}


方法一：实际线条宽度15/1.414
body {
    background:#FFF;
    margin:50px;
    background:
   /*#2980B9 0中0表示此之前最大数，即#2980B9 25%*/
    /*此处设置0，为了减少重复性，方便维护*/
    linear-gradient(45deg, #3498DB 25%, #2980B9 0,#2980B9 50%,#3498DB 0%,#3498DB 75%,#2980B9 0);
    background-size:30px 30px;

}

方法二：
！必须指定width、height，用于repeating-linear-gradient填充
div {
    width:600px;
    height:600px;
    background:
    /*让repeating-linear-gradient自动填充div，    可以任意修改角度，直接指定线条宽度15px*/
    repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #2980B9 0,#2980B9 30px);
}

方法三：
（用于同一颜色，只有明度有差异）

body {
    width: 600px;
    height: 600px;
    background:#45aad7;
    /*背景图上直接叠加一层半透明白色条纹*/
    background-image:repeating-linear-gradient(45deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1)15px,transparent 0,transparent 30px);
}


body {
    background:#FFF;
    background-image:linear-gradient(0deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 50%) ;
    background-size:30px 30px;
}


body {
    background:#58a;
    background-image:linear-gradient(0deg,white 1px, transparent 0), linear-gradient(90deg,white 1px, transparent 0);
    background-size:30px 30px;
}


body {
    background:#58a;
    background-image:linear-gradient(0deg,hsla(0,0%,100%,.3) 1px, transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.3) 1px, transparent 0),linear-gradient(0deg,white 2px, transparent 0),linear-gradient(90deg,white 2px, transparent 0);
    background-size:15px 15px,15px 15px,75px 75px,75px 75px;
}


body {
    background:#58a;
    background-image:linear-gradient(45deg,#fff 25%, transparent 25%),linear-gradient(-45deg,#fff 25%, transparent 25%);
    background-size:30px 30px;
}


body {
    background:#58a;
    background-image:radial-gradient(#fff 20%, transparent 0),
    background-size:60px 60px;
}


body {
    background:#58a;
    background-image:radial-gradient(#fff 20%, transparent 0),radial-gradient(#fff 20%, transparent 0);
    background-size:60px 60px;
    background-position: 0 0 ,30px 30px;
}


body {
    background:#58a;
    background-image:
            /*下三角向下移动至下一个三角，向下形成正方形*/
                linear-gradient(45deg,hsla(0,0%,100%,.3) 25%, transparent 0),linear-gradient(45deg,transparent 75%, hsla(0,0%,100%,.3) 0),

                /*上三角下形成上正方形*/
                linear-gradient(45deg,transparent 75%, hsla(0,0%,100%,.3) 0),linear-gradient(45deg,hsla(0,0%,100%,.3) 25%, transparent 0);

    background-size: 30px 30px;
    background-position: 0 0,15px 15px;
}

admin

四角:
.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

左上左下角:   
    width: 500px;    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

左上右下角对称:   
    width: 500px;    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

依此类推^

admin

.demo {
        width: 60px;
        height: 60px;
        border: 20px dashed #2196f3;
        background-color:#9c27b0;
        padding: 20px;
    }

admin

摘自:https://www.jianshu.com/p/4d1dc4aa282e

特殊效果: width: 60px; height: 60px; border: 20px dashed #2196f3; background-color:#9c27b0; padding: 20px; background-clip: content-box

admin

在线制作PNG背景:http://www.patternify.com/

.blackcross{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQYV2NkYGD4z8DAsIUBAXwYGRgYNjMwMPhAJcA0TBCkDibBgFMlhpkASt8LHZbhzLgAAAAASUVORK5CYII=)}