Blogger Information
Blog 7
fans 0
comment 0
visits 3287
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
手敲CSS制作太极图
凝思
Original
659 people have browsed it

纯手敲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-gradient
to right 这是设置变色由左向右变化
当只给颜色属性时,就是渐变色,会有过度区域
指定百分比区域,如50%,可以达到直接变色的效果

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post