css实现 背景重复线条 实现盒子四个角发光效果 实现内阴影加边框发光效果

 背景重复线条

 

              width: 100%;
              height: 100%;
              // background-color: rgba(51, 73, 102, 1);
              background-image: linear-gradient(to left, #334966 0.02rem, transparent 0.01rem);
              background-repeat: repeat-x;
              background-position: center left;
              background-size: 8.5% 100%; /* 根据需求调整线条间距 */

 实现盒子四个角发光效果

 

  background:
        linear-gradient(to top, rgba(255, 255, 255, 0), #00ddff) left top
          no-repeat,
        linear-gradient(to right, #00ddff, rgba(255, 255, 255, 0)) left top
          no-repeat,
        linear-gradient(to top, rgba(255, 255, 255, 0), #00ddff) right top
          no-repeat,
        linear-gradient(to right, rgba(255, 255, 255, 0), #00ddff) right top
          no-repeat,
        linear-gradient(to top, #00ddff, rgba(255, 255, 255, 0)) left bottom
          no-repeat,
        linear-gradient(to right, #00ddff, rgba(255, 255, 255, 0)) left bottom
          no-repeat,
        linear-gradient(to top, #00ddff, rgba(255, 255, 255, 0)) right bottom
          no-repeat,
        linear-gradient(to left, #00ddff, rgba(255, 255, 255, 0)) right bottom
          no-repeat;

      background-size:
        0.01rem 0.1rem,
        0.1rem 0.01rem,
        0.01rem 0.1rem,
        0.1rem 0.01rem;
      box-shadow: inset 0px 0px 0.3rem #195777;

 

实现内阴影加边框发光效果

    border: 0.01rem solid rgba(31, 52, 76, 0.5);
    border-width: 0.01rem;
    border-style: solid;

    border-image: radial-gradient(
        rgba(25, 147, 243, 0.1),
        rgba(184, 213, 235, 0),
        rgba(23, 170, 201, 0.5)
      )
      1;
    box-shadow: inset 0px 0px 15px rgba(31, 52, 76, 1);