通过CSS实现太极图案例

小案例：运用CSS实现太极图

总结

1.概述

所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。太极也指：“一阴一阳之谓道”也正是对太极的解释。
话不多说，先让我们看看太极图的形状~
在这里插入图片描述
乍看好像挺难的，其实通过我们CSS是可以实现的，我们需要用到圆角边框属性和径向渐变、线性渐变属性就可以了，如果对这两个属性不是很熟悉的话，建议您先移步看下我的前面CSS的第八章和第九章的讲解，还是讲的比较仔细的，零基础的也能看得懂。

2.思路

先准备一个正方形的盒子，把这个盒子分成上下两个部分，这两个部分都是设置一个径向渐变，一个以黑色为圆心开始，另一个以白色圆心开始，后面都以透明色或者是白色结尾，此时两个径向渐变的黑白色圆环就成型了。然后给它一个圆角边框属性，变成一个圆形盒子。最后来个线性渐变就实现了。
以下是结合我的思路把太极图补全的样子：
在这里插入图片描述

3.详细步骤讲解：

1. 准备一个宽和高都是350px的盒子，设置一个边框，并居中放置。

.box{ width: 350px; height: 350px; border: 1px solid red; margin: 100px auto; }

2. 给上半部分设置一个以黑色开始径向的渐变

因为这个盒子的边长是350px，所以我们径向渐变的圆半径设为175px。然后就是圆心的方向了，很明显，水平方向上，圆心是在中间的，垂直方向上，圆心在1/4处，也就是25%，也可以通过控制台滚动鼠标来慢慢找到圆心合适的位置。

第一个圆是以黑色开始的径向渐变，黑色部分大概占据15%左右，然后就是，15%~50%是白色，最后以透明色结尾
background: radial-gradient(175px 175px at 175px 25%,black 15%,white 15%,white 50%,transparent 50%)

此时效果图为：
在这里插入图片描述

我们发现中间15%~50%的白色部分和外面的透明色一样，为了便于区分，不妨先把中间的白色部分换成肉眼可见的红色。

background: radial-gradient(175px 175px at 175px 25%,black 15%,red 15%,red 50%,transparent 50%);

效果图：
在这里插入图片描述

3. 同理，给下半部分设置一个以白色开始径向的渐变

第一个圆做好了以后，第二个直接照葫芦画瓢，只是圆心位置想向下移动一个半径的距离即在3/4处，也就是75%，中间是以白色开始的渐变，其他一样。

radial-gradient(175px 175px at 175px 75%,white 15%,black 15%,black 50%,transparent 50%);

效果图：
在这里插入图片描述

4. 此时再给盒子一个圆角边框属性，让其变成圆形盒子

 border-radius: 50%;

效果图：
在这里插入图片描述

5. 再来一个从左到右的线性渐变，由白色开始，到黑色各一半

linear-gradient(to right,white 50%,black 50%);

效果图：
在这里插入图片描述

6. 完善颜色

最后把刚第2步中，为了便于观察第一个径向渐变时，白色部分替换成红色的，再还原成白色,就做好了太极图。

 background: radial-gradient(175px 175px at 175px 25%,black 15%,white 15%,white 50%,transparent 50%),

太极图成品：
在这里插入图片描述
完整展示：

<title>太极图</title>
    <style>
        .box{
      
      
            width: 350px;
            height: 350px;
            border: 1px solid red;
            margin: 100px auto;
            /* 
              1. 两个圆  径向渐变 
              2. 一个线性渐变色
              3. 先写径向 然后在写线性渐变   不容易被覆盖掉

              最后圆角样式: 盒子变为圆形
            */
            border-radius: 50%;
             /* 背景渐变色 */
             background: 
                /* 第一个圆  径向渐变 */
                /* 圆的大小 175(50%)  at: 控制圆心的位置 x轴  y轴 */
                radial-gradient(175px 175px at 175px 25%,black 20%,white 20%,white 50%,transparent 50%),
                /*第二个 圆的大小 175(50%)  at: 控制圆心的位置 x轴  y轴 */
                radial-gradient(175px 175px at 175px 75%,white 20%,black 20%,black 50%,transparent 50%),
                /* 线性渐变色 */
                linear-gradient(to right,white 50%,black 50%);
        }
    </style>
</head>
<body>
     <div class="box"></div>
</body>

注意：

想要做好太极图先要理清思路，上面每一步都很详细，讲解比较到位；
background背景属性后面用到了三次渐变，分别时两次径向渐变和一次线性渐变，这三次属性值一定是要写在一个background背景属性里面，中间是以英文状态下的 , 逗号隔开,结尾用英文状态下的 ; 分号结束，有一点不规范很容易显示不出来;
注意这个线性渐变一定要写在径向渐变后面，不然线性渐变会覆盖径向渐变的;
上述步骤第二步为了让大家看得明白，把第一个径向渐变的中间白色部分变成了便于观察的红色部分，希望大家不要被绕进去了，相当于是一个借来用的；
关于这个两个径向渐变的圆心的位置，也可以通过打开控制台，通过滑动鼠标去进行寻找合适的位置。

总结

上述是小编为大家整理的太极图案例，用到了圆角边框属性、径向渐变和线性渐变，对太极图案例做了一个比较详细的讲解。自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。