【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

落日映苍穹つ 2022-08-08 17:50 121阅读 0赞

1. DIV + CSS 练习：太极阴阳图。  
 基本思路：由三个div块元素组成；  
 \#taiji太极阴阳图底面  
 \#yin太极阴阳图阴面小圆  
 \#yang太极阴阳图阳面小圆  
 （太极阴阳图：上为阳下为阴或左为阳又为阴）  
 ![1443009908_3011.png][]  
   
 2. 太极阴阳图底图\#taiji：  
 巧用边框：宽度0高度300px，左右边框150分别150px；然后圆角处理作圆形。  
 \#taiji\{  
 margin:auto;  
 width:0;  
 height:300px;  
 border-left:150px solid \#fff;  
 border-right:150px solid \#000;  
 box-shadow: 0 0 20px 0 \#333;  
 border-radius:100%;  
 \}  
 3. 阴阳小圆，两个眼分别用伪属性:before或:after一个做小圆眼。  
 ![1443009908_4704.png][]

\#yin\{  
 width:150px;  
 height:150px;  
 border-radius:100%;  
 background:\#000;  
 \}  
 \#yin:after\{  
 position:absolute;  
 content:" ";  
 width:50px;  
 height:50px;  
 border-radius:100%;  
 background:\#fff;  
 \}  
 4. 定位组合，效果如图：  
 ![1443009906_2196.png][]  
   
 5. 全部代码：

<!DOCTYPE html>
     <html>
     <head>
      <title> 飛天网事--DIV+CSS代码阴阳太极图 </title>
      <meta charset="utf-8" />
      <meta name="description" content="飛天网事，WEB前端开发，纯css3代码时钟精彩案例" />
      <meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" />
      <meta name="author" content="R.tian @eduppp.cn 2015">
      <link rel="shortcut icon"  href="http://eduppp.cn/images/logo4.gif" />
      <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />
     </head>
     <body>
     <style type="text/css">
      #taiji{
      margin:auto;
      width:0;
      height:300px;
      border-left:150px solid #fff;
      border-right:150px solid #000;
      box-shadow: 0 0 20px 0 #333;
      border-radius:100%;
      }
      #yin{
      position:absolute;
      margin:150px 0 0 -75px;
      width:150px;
      height:150px;
      border-radius:100%;
      background:#000;
      }
      #yin:after{
      position:absolute;
      margin:50px 0 0 50px;
      content:" ";
      width:50px;
      height:50px;
      border-radius:100%;
      background:#fff;
      }
      #yang{
      position:absolute;
      margin:0 0 0 -75px;
      width:150px;
      height:150px;
      border-radius:100%;
      background:#fff;
      }
      #yang:after{
      position:absolute;
      margin:50px 0 0 50px;
      content:" ";
      width:50px;
      height:50px;
      border-radius:100%;
      background:#000;
      }
     </style>
     <div id="taiji">
      <div id="yin"></div>
      <div id="yang"></div>
     </div>
     </body>
     </html>

[1443009908_3011.png]: https://img-my.csdn.net/uploads/201509/23/1443009908_3011.png
[1443009908_4704.png]: https://img-my.csdn.net/uploads/201509/23/1443009908_4704.png
[1443009906_2196.png]: https://img-my.csdn.net/uploads/201509/23/1443009906_2196.png