CSS实现太极图（1个div实现）
使用一个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实现）的更多相关文章
- 利用css如何让嵌套的div层不继承父div层的透明度？
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- 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 ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- CSS+HTML实现移动端div左右滑动展示
由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...
- Div+Css画太极图源代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...
- CSS实现太极图（3个div实现）
使用三个div实现太极图的步骤如下: HTML部分 <div class="box"> <div class="yin"></di ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- CSS选择器、标签，div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
- [css]display: table-cell，用div做分列布局
table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...
随机推荐
- 开源代码MyCommons
MyCommons是我在开发Android App中,经过多个项目的实践和应用,上十次修改的,总结起来的代码,目的是希望大家能够快速的完成项目的开发. 主要也是参考了afinal和xutils2个框架 ...
- 2019.4.24 3D效果滚筒导航练习
效果图: 彩千圣天下第一!(小声bb) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- 服务器端控件同html控件的区别
●ASP.NET中共有几种类型的控件? 三种:1-asp.net控件(动态) 2-标准的html控件(静态) 3-标准的html控件加runat="server"属性(动态) 动态 ...
- jquery mobile 动态加载标签时，无法正常展示样式
原因 在chrome中审查元素,发现其增加了很多没有直接写在页面上的标签和样式.页面标签首先经过jquery.mobile-1.4.5.min.js的处理,添加了许多标签,然后再用css布局 解决方案 ...
- Reference Type Casting
5.5.1. Reference Type Casting Given a compile-time reference type S (source) and a compile-time refe ...
- golang-开发配置
环境变量配置 Windows GOROOT GOROOT = D:\ProgramDev\Go GOROOT GOROOT = D:\WorkSpace\goProjects GOBIN GOBIN ...
- C#控件的Resize事件
1. 当控件大小发生改变时,就会触发该事件 所以适合动态调整UI的布局, 例如: 国际化,不同语言导致控件长度不同: 控件的内容是动态增加的,也可以使用. 2.必须是大小会发生改变的控件才会触发该事件 ...
- redis的数据类型(一) key操作
redis是一个key-value形式的数据缓存,因此包括key和value. 一.key的说明 1.redis的key Redis的key是字符串类型,但是key中不能包括边界字符,由于ke ...
- Prinzipien der Computer Zusammensetzung
1.Die Einfuerung der Computer System 1.1 Computer Zusammensetzung und Computer Architektur Unter Com ...
- ASP.NET MVC* 采用Unity依赖注入Controller
Unity是微软Patterns & Practices团队所开发的一个轻量级的,并且可扩展的依赖注入(Dependency Injection)容器,它支持常用的三种依赖注入方式:构造器注入 ...