太极图实列演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>太极图</title>
  8.     <style>
  9.         .box {
  10.             width: 400px;
  11.             height: 400px;
  12.             border: 1px solid red;
  13.             margin: 100px auto;
  14.             /* 
  15.               1. 两个圆径向渐变 
  16.               2. 一个线性渐变色
  17.               3. 先写径向 然后在写线性渐变   不容易被覆盖掉
  19.               最后圆角样式: 盒子变为圆形
  20.             */
  21.             border-radius: 50%;
  23.             /* 背景渐变色 */
  24.             background: 
  25.             /* 第一个圆  径向渐变 */
  26.             /* 圆的大小 200(50%)  at: 控制圆心的位置 x轴  y轴 */
  27.             radial-gradient(200px 200px at 200px 25%,black 20%,white 20%,white 50%,transparent 50%),
  29.             /*第二个 圆的大小 175(50%)  at: 控制圆心的位置 x轴  y轴 */
  30.             radial-gradient(200px 200px at 200px 75%,white 20%,black 20%,black 50%,transparent 50%),
  32.             /* 线性渐变色 */
  33.             linear-gradient(to right,white 50%,black 50%);
  34.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="box"></div>
  40. </body>
  41. </html>