1. DIV + CSS 练习：太极阴阳图。
 基本思路：由三个div块元素组成；
 #taiji太极阴阳图底面
 #yin太极阴阳图阴面小圆
 #yang太极阴阳图阳面小圆
 （太极阴阳图：上为阳下为阴或左为阳又为阴）
 
 
 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一个做小圆眼。
  

#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. 定位组合，效果如图：
 
 
 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>

使用一个div元素完成太极阴阳图，要点| ：before、：after伪对象和box-shoadow阴影的使用。

<style>

#taiji{

position:absolute;

width:0px;

height:300px;

box-shadow:0 0 100px #000;

border-left:150px solid #fff;

border-right:150px solid #000;

border-radius:100%;

}

#taiji:before{

content:"; ";

position:absolute;

left:-25px;top:50px;

width:50px;height:50px;

border-radius:100%;

background:#000;

box-shadow:0 0 0 50px #fff ;

}

#taiji:after{

content:"; ";

position:absolute;

left:-25px;top:200px;

width:50px;height:50px;

border-radius:100%;

background:#fff;

box-shadow:0 0 0 50px #000 ;

}

        </style>

        <div id="taiji" ></div>

本文来自 rtian001 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/rtian001/article/details/48686353?utm_source=copy

【DIV+CSS】代码作业练习DIV+CSS太极阴阳图的更多相关文章

  1. @import————————css代码内部链接另外css

    在css代码里这样可以链接另外的css @import url("style.css");   @import语法结构 @import + 空格+ url(CSS文件路径地址); ...

  2. 如何写出优雅的CSS代码 ？(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  3. 如何写出优雅的css代码 ？

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  4. 页面css代码

    博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...

  5. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

  6. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

  7. CSS代码重构

    CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

  8. CSS 代码是什么?（转）

    转自:http://www.divcss5.com/rumen/r95.shtml CSS 代码是什么,什么是CSS代码? 目录 什么是CSS css代码样子(图) 作用 相关扩展阅读 一.了解什么是 ...

  9. CSS格式化 CSS代码压缩工具

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. jQuery将时间转化为时间戳或将时间戳转化为时间

    下面的这段代码,是可以将时间戳转为时间,或者将时间戳转为时间: <script type="text/javascript"> $.extend({ myTime:{ ...

  2. Java Mail 发送邮件（SSL加密方式，TSL加密方式）

    一.一般配置 发送邮件需要用到  mail包 maven 依赖如下: <!-- https://mvnrepository.com/artifact/javax.mail/mail --> ...

  3. Git之远程仓库

    1,注册账号 登录https://github.com注册一个账号 2,上传公钥 本地CentOS使用命令 ssh-keygen -t rsa生成秘钥 复制秘钥输入到github网站 3,新建仓库 4 ...

  4. POJ-1458 Common Subsequence（线性动规，最长公共子序列问题）

    Common Subsequence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44464 Accepted: 18186 ...

  5. poj3347 Kadj Squares【计算几何】

    Kadj Squares Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 3594   Accepted: 1456 Desc ...

  6. HDU 3091 - Necklace - [状压DP]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3091 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  7. The Concept of a Process

    COMPPUTER SCIENCE AN OVERVIEW 11th Edition One of the most fundamental concepts of modern operating ...

  8. iOS多线程编程之创建线程安全(转载)

    一.多线程的安全隐患 资源共享 1块资源可能会被多个线程共享,也就是多个线程可能会访问同一块资源 比如多个线程访问同一个对象.同一个变量.同一个文件 当多个线程访问同一块资源时,很容易引发数据错乱和数 ...

  9. 几个经典的css技巧

    使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看 ...

  10. 2018中国(深圳)IT领袖峰会马化腾演讲全文《数字中国的机遇与探索》

    我们今天大会的主题是数字中国,也佩服我们吴鹰主席在十年前就想到发展的趋势,这么早就把我们联合会取名数字中国.昨天有一个闭门会议,有相当大的篇幅大家都谈了科技.谈创新,大家觉得科技的威力和优势越来越明显 ...