径向渐变与波纹效果实例页面

展示

代码

• HTML：

  <div class="radial-wave"></div>

• CSS：

  .radial-wave {
      width: 200px; height: 100px;
      background: linear-gradient(to top, transparent 10px, red 10px) no-repeat,
          radial-gradient(20px 15px at left 50% bottom 10px, red 10px, transparent 11px);
      background-size: auto, 20px 10px;
  }