记个笔记 纯CSS简单图

  Document
  
    .con {
      position: relative;
      left: 36px;
      top: 36px;
      width: 600px;
      height: 600px;
      border-radius: 100px;
      background-color: #7094f1;
      overflow: hidden;
      transform: rotate(170deg);
      Box-shadow: 0px 0px 20px -5px #333;
    }

    .r {
      position: absolute;
      border-radius: 50%;
      opacity: .7;
    }

    .con-1 {
      width: 900px;
      height: 900px;
      background-image: linear-gradient(#7094f1, #7fa0f9);
      right: -450px;
      top: -450px;
    }

    .con-2 {
      width: 750px;
      height: 750px;
      background-image: linear-gradient(#8eadfe, #7fa0f9);
      right: -375px;
      top: -375px;
    }

    .con-3 {
      width: 600px;
      height: 600px;
      background-image: linear-gradient(#a2c7fd, #98e1f7);
      right: -300px;
      top: -300px;
    }

    .con-4 {
      width: 166px;
      height: 166px;
      background: #70b4f9;
      left: -131px;
      top: 100px;
    }

    .con-round {
      width: 75px;
      height: 75px;
      background-image: linear-gradient(#6aecff, #bdeaff);
      right: 380px;
      top: 94px;
    }

原文地址：https://cloud.tencent.com/developer/article/2013013