day03

公共样式

float: left;
margin: 10px;
width: 200px;
height: 200px;
background: #58a;
color: red;
text-align: center;
line-height: 200px;
font-size: 20px;
font-weight: bold;

1.网格背景

background-image:linear-gradient(hsla(0,0%,100%,0.3) 1px,transparent 0),
                 linear-gradient(90deg,hsla(0,0%,100%,0.3),1px,transparent 0);

 background-size: 15px 15px;

2.网格背景升级

background-image: linear-gradient(white 2px ,transparent 0),
                  linear-gradient(90deg,white 2px ,transparent 0),
                  linear-gradient(hsla(0,0%,100%,0.3) 1px,transparent 0),
                  linear-gradient(90deg,hsla(0,0%,100%,0.3),1px,transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;

3.径向渐变

background-image: radial-gradient(white 30%,transparent 0);
background-size: 30px 30px;

4.径向渐变升级

background-image: radial-gradient(white 30%,transparent 0),
                  radial-gradient(white 30%,transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;

5棋盘背景

background: transparent;
background-image: linear-gradient(45deg,#bbb 25%,transparent 0),
                  linear-gradient(45deg,transparent 75%,#bbb 0),
                  linear-gradient(45deg,#bbb 25%,transparent 0),
                  linear-gradient(45deg,transparent 75%,#bbb 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px,15px 15px,30px 30px;

6随机背景渐变

1

width: 800px;
height: 200px;
background: linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0,#ab4 65px,hsl(20,40%,90%) 0);
background-size: 80px 100%;

2

width: 800px;
height: 200px;
background: hsl(20,40%,90%);
background-image: 
                  linear-gradient(90deg,#fb3 10px,transparent 0),
                  linear-gradient(90deg,#f65 20px,transparent 0),
                  linear-gradient(90deg,#ab4 10px,transparent 0);
background-size: 80px 100%,60px 100%,40px 100%;

3

width: 800px;
height: 200px;
background: hsl(20,40%,90%);
background-image: linear-gradient(90deg,#fb3 11px,transparent 0),
                  linear-gradient(90deg,#f65 23px,transparent 0),
                  linear-gradient(90deg,#ab4 41px,transparent 0);
 background-size: 41px 100%,61px 100%,83px 100%;