用线性渐变实现方格

CSS3如果合理运用可以少插入很多的图片，不过它的兼容问题也要注意。随着IE6~8的没落，相信CSS3将会越来越来多的被使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变 - 特殊案例</title>
    <style type="text/css">
    div {
       width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px;
       background-image:
       -webkit-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
       -webkit-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
       -webkit-linear-gradient(45deg, transparent 75%, #555 75%),
       -webkit-linear-gradient(-45deg, transparent 75%, #555 75%);
       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%);
   }
</style>
</head>
<body>
    <div></div>
</body>
</html>

效果如上

/**THE END*/

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »

因本文不是用Markdown格式的编辑器书写的，转换的页面可能不符合MIP标准。