css实现网格背景

 https://www.cnblogs.com/laixiangran/p/8999711.html

https://www.cnblogs.com/Anita-meng/p/7867662.htmlcss实现网格背景

.content{
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,rgba(206,214,224,.32) 1px,transparent 0), linear-gradient(rgba(206,214,224,.32) 1px,transparent 0);
        background-size: 15px 15px;
        background-position: 11px 15px;
        background-color: #fef9f3;
}

 

 圆点背景

  .radio-bg{
    z-index: -1;
    border-radius: 20px;
    background-image: radial-gradient(rgba(107,107,107,0.5) 12%, transparent 0),radial-gradient(rgba(107,107,107,0.5)  12%, transparent 0);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    opacity: 0.5;
  }

 渐变线条

  .linear{
    width: 100%;
    height: 1px;
    margin-top: 16px;
    margin-bottom: 26px;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 10%,
      rgba(21,124,89,0.3) 20%,
      rgba(21,124,89,0.4) 30%,
      rgba(21,124,89,0.5) 40%,
      rgba(21,124,89,0.8) 50%,
      rgba(21,124,89,0.5) 60%,
      rgba(21,124,89,0.4) 70%,
      rgba(21,124,89,0.3) 80%,
      rgba(0,0,0,0) 90%,
      rgba(0,0,0,0) 100%)
  }