css 横线_CSS-画一个太极阴阳图

先来看一下最终展示

接下来一步步实现它

第一步

写一个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;

效果图

右边的小圆，同理，只要把左右颜色变化即可

完成刷新运行一下

最终效果图

css 横线_CSS-画一个太极阴阳图相关推荐

用css实现一个太极阴阳图，使用多个div块实现
用css实现一个太极阴阳图,使用多个div块实现下面是HTML代码 <!DOCTYPE html> <html lang="en"> <head&g ...
用canvas画一个太极八卦图
首先是一个静态的八卦图: 这是状态图主要代码如下: 左半圆ctx.beginPath()ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true)ctx.fi ...
Python零基础学习 | 分享一个使用Python画出太极阴阳八卦图的代码
大家好,我是王某人. 一.写在前面前几天在Python技术交流群有个小伙伴分享一个使用Python画出太极阴阳八卦图的代码,这里拿出来给大家分享下,一起学习下. 不过这里他的代码是有点问题的,不过不 ...
【DIV CSS】代码作业练习DIV CSS太极阴阳图
1. DIV CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴 ...
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
太极图php代码,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
Java绘制太极阴阳图
用Java语言绘制的太极阴阳图,没有精确的坐标,所以没有标准的中心对称,仅供参考. 示例代码如下: import java.awt.Font; import java.awt.Graphics; im ...

css 横线_CSS-画一个太极阴阳图

css 横线_CSS-画一个太极阴阳图相关推荐

最新文章

热门文章