CSS生成方格背景

这个其实是用线性渐变写的,感觉挺6的,background-size 代表的是给background-image设定的大小。

效果:

CSS生成方格背景_第1张图片

代码:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS生成方格背景title>
  <style>
    div {
      width: 600px; height: 600px; 
      background-color: #00CCCC; 
      background-size: 100px 100px;
      background-image: linear-gradient(45deg, #3366CC 25%, transparent 25%),
        linear-gradient(-45deg, #3366CC 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3366CC 75%),
        linear-gradient(-45deg, transparent 75%, #3366CC 75%);
    }
  style>
head>
<body>
  <div>testdiv>
body>
html>

你可能感兴趣的:(前端)