CSS，设置虚线网格为元素背景

最新推荐文章于 2024-05-31 10:22:26 发布

Life Free

最新推荐文章于 2024-05-31 10:22:26 发布

阅读量780

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44875693/article/details/129841949

版权

CSS，设置虚线网格为元素背景

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格背景</title>
  <style>
    body{
      height: 1080px;
      width: 1920px;
      margin: 0;
    }
    /* 虚线部分 */
    .bg-grid::before,
      .bg-grid::after {
        opacity: .5;
        content: '';
        background-repeat: repeat;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
      }

      .bg-grid::before {
        /* 从左往右 */
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 1px, transparent 1px);
        background-size: 10px 30px;
      }

      .bg-grid::after {
        /* 从上往下 */
        background:
          linear-gradient(to bottom, rgba(255, 255, 255, 1) 1px, transparent 1px),
          linear-gradient(to right, rgba(0, 0, 0, 0.6) 1px, transparent 1px);
        background-size: 30px 10px;
      }

      .bg-grid {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 400px;
        height: 400px;
        z-index: -1;
        border-right: 1px #adaeaf dashed;
        border-bottom: 1px #adaeaf dashed;
      }
   /* 实线条部分 */
   .bg-grid1{
    position: absolute;
    top: 10%;
    left: 20%;
    width: 400px;
    height: 400px;
     background: linear-gradient(to right,#5f5f5f 1px,transparent 1px),
     linear-gradient(to bottom,#5f5f5f 1px,transparent 1px);
     background-size: 20px 20px;
     background-repeat: repeat;
     border-right: 1px #5f5f5f solid;
      border-bottom: 1px #5f5f5f solid;
   }
  </style>
</head>
<body>
 <div class="bg-grid"></div>
 <div class="bg-grid1"></div>
</body>
</html>