请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 812|回复: 7

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

[复制链接]
发表于 2017-12-24 07:11:11 | 显示全部楼层 |阅读模式

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>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

 楼主| 发表于 2017-12-24 11:29:28 | 显示全部楼层

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;
}

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-12-24 11:39:44 | 显示全部楼层

图片为放大后的效果,与上图有所区别,注意偶行为单色;即奇行黑白相间,偶行全黑效果。
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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-12-24 21:44:21 | 显示全部楼层
原文出处: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;
}

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-5-7 06:15:53 | 显示全部楼层

设计时常用的四角边框线,或两角一角设计


四角:
.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;

依此类推^

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-5-7 06:28:18 | 显示全部楼层
.demo {
        width: 60px;
        height: 60px;
        border: 20px dashed #2196f3;
        background-color:#9c27b0;
        padding: 20px;
    }
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-5-7 06:30:42 | 显示全部楼层

css 之 background (一): 背景与盒模型之间的关系

摘自:https://www.jianshu.com/p/4d1dc4aa282e
特殊效果: width: 60px; height: 60px; border: 20px dashed #2196f3; background-color:#9c27b0; padding: 20px; background-clip: content-box
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-5-10 21:27:06 | 显示全部楼层
在线制作PNG背景:http://www.patternify.com/
.blackcross{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQYV2NkYGD4z8DAsIUBAXwYGRgYNjMwMPhAJcA0TBCkDibBgFMlhpkASt8LHZbhzLgAAAAASUVORK5CYII=)}
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2019-12-8 19:07 , Processed in 0.078125 second(s), 16 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表