多种样式的css遮罩效果-html代码-BFW代码库

多种样式的css遮罩效果

代码语言：html

代码描述：多种样式的css遮罩效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html {
  font: normal 100%/1.5 sans-serif;
  background: #1F2933;
  color: white;
}

html,
body {
  height: 100%;
  margin: 1rem;
  padding: 0;
}

figure {
  margin: 0;
}

figcaption {
  text-align: center;
}

code {
  color: #e19123;
}

@media screen and (min-width: 400px) {
  body {
    display: grid;
    grid: auto/repeat(2, 1fr);
    grid-gap: 5px;
  }

  div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 1;
  }
  div:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 2;
    display: grid;
    grid: auto/repeat(2, 1fr);
    grid-gap: 20px;
  }
  div:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 3;
  }
  div:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 4;
    display: grid;
    grid: auto/repeat(2, 1fr);
    grid-gap: 20px;
  }
}
@media screen and (min-width: 720px) {
  body {
    display: grid;
    grid: auto/repeat(6, 1fr);
    grid-gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
  }

  div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 1;
  }
  div:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 2;
    display: grid;
    grid: auto/repeat(4, 1fr);
  }
  div:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 3;
  }
  div:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 4;
    display: grid;
    grid: auto/repeat(4, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  body {
    display: grid;
    grid: auto/repeat(3, 1fr);
    grid-gap: 15px;
    max-width: 1200px;
    margin.........完整代码请登录后点击上方下载按钮下载查看