先来看一下最终展示
接下来一步步实现它
第一步
写一个HTML文件，内容只需要一个<div>标签，给一个类为"taiji"
<!DOCTYPE html>
<html>
<head>
<title>太极</title>
<link rel="stylesheet" href="taiji.css">
</head>
<body>
<div class="taiji"></div>
</body>
</html>为了方便，这里使用的是外部链接样式表。
第二步
到这页面还是一片空白
其实<div>已经在里面了
先给它一个边框，就可以看到了
.taiji{ border: 1px solid black;} /* 1像素 实线 黑色 边框 */
为什么是横线呢？
因为<div>是一个块级元素，块级元素的高度由其内部文档流元素的高度总合决定
因为HTML里的<div>内容为空
所以<div>在这里是一个高度为零，宽度自适应的黑色1px厚的横线
于是给它指定一个宽高
width: 200px; height: 100px;得到一个长方形的黑色边框
很好奇吧
继续
给其一个属性，让它边框变成半圆形
border-radius: 50%;/* CSS 属性 border-radius 允许你设置元素的外边框圆角 */由于高度是宽度的一半所以得到了一个椭圆
诶？不对啊
太极是圆形的啊
做一个椭圆是不是做错了
先别急
接着看
border-bottom-width: 100px; /* 指定下边框的宽度为100px */运行一下
发现了什么
太极的雏形有了
那是为什么呢？
我做一个的讲解
首先按照预想的那样 设置宽高为一样的值
运行
然后添加刚才的属性进去
得到一个这样的图
这是因为
ok 雏形初现之后 再来做两个小圆
本文探讨的是只使用一个<div>标签的情况下制作太极图
所以这里要使用到伪元素定义
这里先说一下伪元素的概念，就像伪类一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。这里用到的伪元素是::before和::after，相当于在div里面添加前面和后面两个元素。
注意：在伪元素要添加content，否则设置宽高都没用的；还有就是要设置position属性，否则还伪元素还是不会显示
为了效果看的更加明显 我还没有调整位置
现在可以理解为一个大圆里面包含了一个小圆
小圆在内部相对于大圆进行定位
如果大圆位置变动 小圆也会跟着一起变动 但与大圆的定位保持不变
现在调整一下位置
top: 50px;/* 指的是小边框上线到大边框上线的距离 */
left: 0;
***上下两种方式***
top: 50%;
left: 0;
因为大圆的边框设置为黑色，小圆没有内容，所以被遮挡了，只要给一个背景色就可以
background-color: white;
右边的小圆，同理，只要把左右颜色变化即可
完成 刷新运行一下
扫一扫
2053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
