CSS多重背景和背景图像定位属性绘制太极图
很多时候不是技术做不到，而是我们缺乏思考和对技术的熟练应用。
CSS的多重背景功能可以让用户使用多个背景（可以是图片，也可以是色彩）来填充元素，利用背景定位background-position属性可以对背景图片定位。本人将利用CSS的多重背景和渐变方法来制作一个太极图。
先上一个太极图的拆分图：
设计思路：太极图可有1个白色小圆（1），1个黑色小圆（2），1个黑色大圆（3），一个白色大圆（4），一个左黑右白的大圆（5）组成。其中，1,2,3,4使用径向渐变，5用线性渐变。
实操代码部分：
1.html：
<div class="Taiji"></div>
2.CSS:
.Taiji{
width: 200px; height: 200px;
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%, -50%) ;
transform-origin: 0 0;
box-shadow:0 0 20px #000;
border-radius:50%;
background-image:radial-gradient(#000 12.5px, transparent 12.5px),
radial-gradient(#fff 12.5px, transparent 12.5px),
radial-gradient(#fff 50px, transparent 50px),
radial-gradient(#000 50px, transparent 50px),
linear-gradient(90deg,#000 100px, #fff 100px);
background-position:center 50px,center -50px,center 50px,center -50px,0 0;}
相关推荐
-
PHP8种变量类型的详细讲解2025-02-22 00:32:24 -
php+apache 和 php+nginx的区别2025-02-22 00:21:27 -
PHP：与workerman结合实现定时任务2025-02-22 00:15:57 -
Nginx的Rewrite规则与实例2025-02-22 00:15:39 -
MySql中身份证字段的简单脱敏介绍2025-02-22 00:15:36