CSS
语言：
CSSSCSS
确定
body {
background: lightgrey;
}
div {
width: 200px;
height: 125px;
background: salmon;
margin: 30px auto;
}
.grid1 {
background: white;
background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0), linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
background-size: 30px 30px;
}
.grid2 {
background: #58a;
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
}
.grid3 {
background: #58a;
background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}
.polka1 {
background: #655;
background-image: radial-gradient(#d2b48c 20%, rgba(0, 0, 0, 0) 0%);
background-size: 30px 30px;
}
.polka2 {
background: #655;
background-image: radial-gradient(#d2b48c 20%, rgba(0, 0, 0, 0) 0%), radial-gradient(#d2b48c 20%, rgba(0, 0, 0, 0) 0%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
.polka3 {
background: #655;
background-image: radial-gradient(#d2b48c 10%, rgba(0, 0, 0, 0) 0%), radial-gradient(#d2b48c 10%, rgba(0, 0, 0, 0) 0%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
.checkerboard1 {
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
.checkerboard2 {
background: #eee;
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-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
}
.checkerboard3 {
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
.checkerboard4 {
background: black;
background-image: linear-gradient(45deg, red 25%, transparent 0, transparent 75%, red 0), linear-gradient(45deg, red 25%, transparent 0, transparent 75%, red 0);
background-position: 0 0, 20px 20px;
background-size: 40px 40px;
}
.checkerboard5 {
background: #eee url('data:image/svg+xml, ');
background-size: 30px 30px;
}
.stripes1 {
background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, #f0e2db 0);
background-size: 80px 100%;
}
.stripes2 {
background: #f0e2db;
background-image: linear-gradient(90deg, #fb3 10px, transparent 0), linear-gradient(90deg, #ab4 20px, transparent 0), linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;
}
.stripes3 {
background: #f0e2db;
background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;
}
