51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

CSS3实现各种格子纹理效果

时间:2017-08-15 14:55点击:

代码如下



<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3实现各种纹理背景效果</title>
    <style>
        body {
            font-family: Georgia, serif;
        }
        .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;
        }
        .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);
        }
        .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);
        }
        .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%);
        }
        .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));
        }
        #footer {
            text-align: center;
            clear: both;
            padding-top: .5em;
            border-top: 1px solid #ccc;
            font-variant: small-caps;
        }
    </style> 
</head>
<body>
    <div><A href="http://www.51kydm.com/">http://www.51kydm.com/</A></div>
    <h1></h1>
    <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>
</body>
</html> 


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开