ASCII码 ASCII码

手敲CSS制作太极图

发布于：2022-05-11 15:27:48  栏目：技术文档

纯手敲CSS制作太极图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS太极图</title>
  6.     <style>
  7.         body{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .br-100{
  12.             border-radius: 100%;
  13.         }
  14.         .round {
  15.             width: 200px;
  16.             height: 200px;
  17.             border: 1px solid black;
  18.             margin: 50px auto auto;
  19.             background: linear-gradient(to right, black 50%, white 50%);
  20.         }
  21.         .round-m{
  22.             width: 98px;
  23.             height: 98px;
  24.             border: 0 solid black;
  25.             margin-left:25%;
  26.         }
  27.         .round-x{
  28.             width: 20px;
  29.             height: 20px;
  30.             border: 0 solid black;
  31.             margin-left:40%;
  32.             margin-top: 40%;
  33.         }
  34.         .round-m1{
  35.             background-color:black;
  36.             border: 1px solid black;
  37.         }
  38.         .round-x1{
  39.             background-color:white;
  40.         }
  41.         .round-m2{
  42.             background-color:white;
  43.             border: 1px solid rgba(0,0,0,0);
  44.         }
  45.         .round-x2{
  46.             background-color:black;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div class="br-100 round">
  52.         <div class="br-100 round-m round-m1">
  53.             <div class="br-100 round-x round-x1"></div>
  54.         </div>
  55.         <div class="br-100 round-m round-m2">
  56.             <div class="br-100 round-x round-x2"></div>
  57.         </div>
  58.     </div>
  59. </body>
  60. </html>

太极图CSS制作效果

太极图

小知识点

background: linear-gradientto right 这是设置变色由左向右变化当只给颜色属性时，就是渐变色，会有过度区域指定百分比区域，如50%，可以达到直接变色的效果

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行