CSS揭秘背景与边框章节练习笔记

网格

1
2
3
4
5
6
background-color: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
linear-gradient(90deg,hsla(0, 0%, 100%, .3) 1px, transparent 0) ;
background-size: 75px 75px,75px 75px, 15px 15px, 15px 15px;

波点

1
2
3
4
5
6
7
8
9
10
11
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
// 多重背景
// 可以认为无限大的背景，重复平铺，整体平移
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

棋盘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
background: skyblue;
background-image: linear-gradient(45deg,#eee 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #eee 0),linear-gradient(45deg,#eee 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #eee 0);
background-size: 60px 60px;
background-position: 0 0 ,0  0, 30px 30px,-30px -30px;
// svg
background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
            <rect x="50" width="50" height="50" />\
            <rect y="50" width="50" height="50" />\
            </svg>');
background-size: 30px 30px;