Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太极图</title>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
/*
1. 两个圆径向渐变
2. 一个线性渐变色
3. 先写径向 然后在写线性渐变 不容易被覆盖掉
最后圆角样式: 盒子变为圆形
*/
border-radius: 50%;
/* 背景渐变色 */
background:
/* 第一个圆 径向渐变 */
/* 圆的大小 200(50%) at: 控制圆心的位置 x轴 y轴 */
radial-gradient(200px 200px at 200px 25%,black 20%,white 20%,white 50%,transparent 50%),
/*第二个 圆的大小 175(50%) at: 控制圆心的位置 x轴 y轴 */
radial-gradient(200px 200px at 200px 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>
</html>