麻烦老师检查这两种写法，看看有什么需要改进的，谢谢老师！
来源：2-28 项目作业
qq_宝慕林8034856
2021-11-10 10:47:25
<!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>
.box1, .box2{
width: 600px;
height: 300px;
margin: 0 auto;
margin-bottom: 20px;
border: 2px solid rgba(228, 224, 224, 0.797);
box-shadow: 3px 3px 10px rgb(203, 199, 199);
overflow: hidden;
position: relative;
}
.inside{
width: 600px;
height: 600px;
border-radius: 50%;
background-image: radial-gradient(50% 50%, white 0, white 30%, red 30%, red 40%, orange 40%, orange 50%, yellow 50%, yellow 60%, green 60%, green 70%, cyan 70%, cyan 80%, blue 80%, blue 90%, purple 90%, purple 95%, white 95%, white 100%);
}
.box2 div{
position: absolute;
border-radius: 50%;
}
.red {
width: 180px;
height: 180px;
border: 32px solid red;
top: 180px;
left: 180px;
}
.orange {
width: 240px;
height: 240px;
border: 32px solid orange;
top: 150px;
left: 150px;
}
.yellow {
width: 300px;
height: 300px;
border: 32px solid yellow;
top: 120px;
left: 120px;
}
.green {
width: 360px;
height: 360px;
border: 32px solid green;
top: 90px;
left: 90px;
}
.cyan {
width: 420px;
height: 420px;
border: 32px solid cyan;
top: 60px;
left: 60px;
}
.blue {
width: 480px;
height: 480px;
border: 32px solid blue;
top: 30px;
left: 30px;
}
.purple {
width: 540px;
height: 540px;
border: 16px solid purple;
top: 16px;
left: 16px;
}
</style>
</head>
<body>
<div class="box1">
<div class="inside"></div>
</div>
<div class="box2">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>
</body>
</html>
1回答
-
好帮手慕然然
2021-11-10
同学你好，这两种实现方式基本都没问题，建议优化一下紫色彩虹条的宽度，与其它彩虹条保持一致，代码修改如下：
祝学习愉快！
0
相似问题