使用一个div实现太极图的步骤如下：

HTML部分：

<body>

    <div class="box-taiji">

    </div>

</body>

第一步，结合border实现左黑右白的正方形，加上圆角、阴影。代码如下;

.box-taiji{

            width:;

            height:300px;

            position:relative;

            margin: 50px auto;

            border-left:150px solid #000;

            border-right:150px solid #fff;

            box-shadow: 0 0 30px rgba(0,0,0,0.5);

            border-radius: 300px;

        }

效果如下：

第二步，通过伪类，实现一个一个白色的圆形，定位好位置。同时，利用box-shadow:0 200px 0 #000;实现同样大小的圆，放好。

.box-taiji:after{

            width:150px;

            height:150px;

            position:absolute;

            content: '';

            display: block;

            top:;

            left:-75px;

            z-index:;

            background-color: #fff;

            border-radius:50%;

            box-shadow:0 150px 0 #000;

        }

先后实现的效果如下：

第三步，同样第二步一样的原理，再实现黑白两个圆，放到相关的位置。

.box-taiji:before {

            content:'';

            position:absolute;

            display: block;

            width:75px;

            height:75px;

            top:38px;

            left:-38px;

            z-index:;

            background-color:#000;

            border-radius:50%;

            box-shadow:0 150px 0 #fff;

        }

最终效果如下：

和用上一篇3个div实现太极图一样，我们也可以通过CSS3动画实现旋转太极图。

CSS实现太极图（1个div实现）的更多相关文章

  1. 利用css如何让嵌套的div层不继承父div层的透明度？

    http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...

  2. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

  3. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  4. CSS+HTML实现移动端div左右滑动展示

    由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...

  5. Div+Css画太极图源代码

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...

  6. CSS实现太极图（3个div实现）

    使用三个div实现太极图的步骤如下: HTML部分 <div class="box"> <div class="yin"></di ...

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

    1. DIV + CSS 练习:太极阴阳图.  基本思路:由三个div块元素组成:  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  (太极阴阳图:上为阳下 ...

  8. CSS选择器、标签，div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...

  9. [css]display: table-cell，用div做分列布局

    table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...

随机推荐

  1. 浅谈Android选项卡（三）

    上一节介绍了TabActivity的简单用法,但是现在的Api中已经不建议使用了,建议使用Fragment来替代以上的功能,下面介绍下使用Fragment和ViewPager的结合使用. http:/ ...

  2. 博客主题皮肤探索-主题的本地化和ChromeCacheView使用

    还有前言 用了大佬的主题之后,有些资源是无法在暴露的接口处更改的,需要自己去css更改.但后台给的都是压缩过的,找起来比较困难,所以特意记录了这篇. 本地资源替换 侧边栏: .introduce-bo ...

  3. （三）Audio子系统之AudioRecord.startRecording

    在上一篇文章<(二)Audio子系统之new AudioRecord()>中已经介绍了Audio系统如何创建AudioRecord对象以及输入流,并创建了RecordThread线程,接下 ...

  4. JavaScript《一》

    脚本语言概念:不需要提前编译的,即时执行的语言,如js,t-sql等 在一个js块中,只要有一个语句出现错误,整个块都不执行 强类型:在编译时就已经确定的类型,弱类型,在运行时,编译器自动根据赋值在确 ...

  5. 【HADR】How to reestablish HADR from scratch after a failure on Standby

    转载 http://www-01.ibm.com/support/docview.wss?uid=swg21514783 Cause  Have a HADR pair with Primary on ...

  6. (转)oracle linux 7 安装oracle 12c

    原文:https://blog.csdn.net/jiuyun1986/article/details/53589446 https://blog.csdn.net/admin_root1/artic ...

  7. Maven Oracle JDBC

    Oracle的JDBC驱动程序无法从公共仓库下载,你只能手动部署Oracle JDBC驱动程序到本地库.命令如下: mvn install:install-file -Dfile={ORACLE_HO ...

  8. Mozilla新特性只支持https网站,再次推动SSL证书普及

    Mozilla的官方博客2015.4.30正式宣布了淘汰HTTP的方案. 其中包括:设定一个日期,所有的新特性将只提供给HTTPS网站:HTTP网站将逐步被禁止访问浏览器功能,尤其是那些与用户安全和隐 ...

  9. CNN理解与实现

    CNN理解与实现 组成部分 Convolution Layer Pool Layer: Max-pooling layer Average-pooling layer Full Connected(F ...

  10. PHP OOP面向对象部分方法归总（代码实例子）

    <?php//对象名存在栈内存中,数据存在堆内存中class leyangjun{    var $name;  //定义变量    var $age;    var $sex;         ...