没思路彩虹

相关代码：

<!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>Document</title>
    <style>
        .box{
            width: 900px;
            height: 300px;
            background-color: aqua;
            position: relative;
            overflow: hidden;
            background-size: contain;
        }
        .spec1{
            width: 640px;
            height: 600px;
            border: 40px solid black;
            position: absolute;
            top: 0;
            left: 15%;
            background-size: cover;
        }
        .spec2{
            width: 630px;
            height: 600px;
            border: 40px solid red;
            position: absolute;
            top: 40px;
            left: 15%;
        }
        .spec3{
            width: 620px;
            height: 600px;
            border: 40px solid green;
            position: absolute;
            top: 80px;
            left: 15%;
        }
        .spec4{
            width: 610px;
            height: 600px;
            border: 40px solid yellow;
            position: absolute;
            top: 120px;
            left: 15%;
        }
        .spec1,.spec2,.spec3,.spec4{
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="spec1"></div>
        <div class="spec2"></div>
        <div class="spec3"></div>
        <div class="spec4"></div>
    </div>
</body>
</html>

老师这个我完全没思路，写的代码也不对，请老师指导下

长袖泡面头 2022-03-30

源自：背景与渐变 2-28 项目作业

收起

2回答

好帮手慕星星 2022-04-02 11:10:27

同学你好，解答如下：

1、purple 50%, purple 60%, blue 60%，这种写法是为了没有不同颜色之间的过渡颜色。如果这样写

会有白色到紫色的过渡颜色，紫色到红色的过渡颜色

而我们不想要过渡颜色，所以就在分界处添加相同的颜色purple 50%, purple 60%, blue 60%，紫色是50%到60%的位置，蓝色从60%处设置，就不会有紫色到蓝色的过渡颜色了。

2、如果想将50%，50%改为center，需要写全，圆形，从中心位置到最近边

自己再理解下！

收起回答

好帮手慕星星 2022-03-31 09:53:08

同学你好，思路可以，但是样式设置的不准确。可以实现这样的效果，多个圆进行嵌套，而不是同学实现的椭圆形

那么从外到里，每个圆的宽高要减小border*2的宽度，left左侧定位需要换为px，从外到里逐个增加一个border的宽度。代码结构中还需要再增加一个div，形成五个圆。参考代码：

祝学习愉快！

收起回答

提问者长袖泡面头 #1

谢谢老师，用径向渐变有没可能达到这种效果呢

2022-04-01 18:26:09

好帮手慕星星回复提问者长袖泡面头 #2

可以用渐变实现，参考：

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 150px;
            margin: 100px auto;
            overflow: hidden;
        }
       
        .box1 div {
            height: 300px;
            border-radius: 50%;
            background-image: radial-gradient(50% 50%, white 0%, white 50%, purple 50%, purple 60%, blue 60%, blue 70%, green 70%, green 80%, yellow 80%, yellow 90%, red 90%);
        }
    </style>
</head>

<body>
    <!-- 方式1 径向渐变 -->
    <div class="box1 box">
        <div></div>
    </div>

</body>

</html>

自己测试下。

2022-04-01 18:41:21

提问者长袖泡面头回复好帮手慕星星 #3

我自己也试了下，是这个效果，课程里没有学到
white 70%,red 70%,red 80%,green 80%,green 90%,purple 90%
这种表示方法

另外请问老师径向渐变的圆心位置只能百分数50% 50%吗，我试了center center不行

2022-04-01 19:15:24