2-28 作业按照要求完成的代码，但是好像达不到效果要求？半边的彩虹应该怎么修改呢？感觉第二种和第三种好像是同一种写法了，都是用嵌套

问题描述：

要怎么修改才能实现题目要求的效果呢？溢出隐藏没有反应？

同时好奇都有哪些实现方法呢？

相关代码：

<!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>
        section {
            width: 500px;
            height: 300px;
            margin-bottom: 20px;
            border: 1px solid #000;
            overflow: hidden;
        }

        /* 径向渐变实现彩虹效果，但是下半部分无法隐藏 */
        .s1 {
            /* border-radius: 50%; */
            background-color: antiquewhite;
            background-image: radial-gradient(white 10%,orange 10% 20%,yellow 20% 30%,green 30% 40%,blue 40% 50%,purple 50% 60%,white 60%);
        }

        /* 背景颜色颜色填充嵌套实现彩虹效果 */
        .s2 {
            position: relative;
        }

        div {
            position: absolute;
            border-radius: 50%;
            margin: 0 auto;
            overflow: hidden;
        }

        .box1 {
            width: 500px;
            height: 300px;
            background-color: purple;
            top: 0;
            left: 0;
        }

        .box2 {
            width: 460px;
            height: 260px;
            background-color: blue;
            top: 20px;
            left: 20px;
        }

        .box3 {
            width: 420px;
            height: 220px;
            background-color: green;
            top: 20px;
            left: 20px;
        }

        .box4 {
            width: 380px;
            height: 180px;
            background-color: yellow;
            top: 20px;
            left: 20px;
        }

        .box5 {
            width: 340px;
            height: 140px;
            background-color: orange;
            top: 20px;
            left: 20px;
        }

        .box6 {
            width: 300px;
            height: 100px;
            background-color: white;
            top: 20px;
            left: 20px;
        }

        /* 边框颜色嵌套实现彩虹效果 */
        .s3 {
        }

        .box7 {
            width: 460px;
            height: 260px;
            border: 20px solid purple;
        }

        .box8 {
            width: 420px;
            height: 220px;
            border: 20px solid blue;
        }

        .box9 {
            width: 380px;
            height: 180px;
            border: 20px solid green;
        }

        .box10 {
            width: 340px;
            height: 140px;
            border: 20px solid yellow;
        }

        .box11 {
            width: 300px;
            height: 100px;
            border: 20px solid orange;
        }
    </style>
</head>
<body>
    <!-- 渐变方式 -->
    <section class="s1"></section>

    <!-- 子元素颜色嵌套 -->
    <section class="s2">
        <div class="box1">
            <div class="box2">
                <div class="box3">
                    <div class="box4">
                        <div class="box5">
                            <div class="box6">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 边框颜色嵌套 -->
    <section class="s3">
        <div class="box7">
            <div class="box8">
                <div class="box9">
                    <div class="box10">
                        <div class="box11">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

呜蜩的呀 2022-07-24

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

收起

1回答

好帮手慕慕子 2022-07-25 09:45:46

同学你好，问题解答如下：

1、需要在外层添加一个盒子，设置高度为当前彩虹所在盒子的一半，并给新添加的盒子添加overflow属性，让超出的部分隐藏，实现效果。具体可以参考如下代码修改：

去掉给section标签设置的边框和下边距

2、同学这几种方式实现的很棒了，目前暂无其他方式了。

祝学习愉快~

收起回答

提问者呜蜩的呀 #1

谢谢老师的帮忙，按照老师给的方法进行了修改，前面两个都实现了只显示一半彩虹的效果，但是最后一种，在设置了外边框高度为里面盒子一半的情况下，同时设置溢出隐藏，依然有半边显示在外面？这是什么情况呢？

<!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>
        .wrap {
            width: 500px;
            height: 150px;
            overflow: hidden;
            margin: 20px auto;
            border: 1px solid #000;
        }
        .s1,.s2,.s3 {
            width: 500px;
            height: 300px;
            overflow: hidden;
        }

        /* 径向渐变实现彩虹效果，但是下半部分无法隐藏 */
        .s1 {
            /* border-radius: 50%; */
            background-color: antiquewhite;
            background-image: radial-gradient(white 10%, orange 10% 20%, yellow 20% 30%, green 30% 40%, blue 40% 50%, purple 50% 60%, white 60%);
        }

        /* 背景颜色颜色填充嵌套实现彩虹效果 */
        .s2 {
            position: relative;
        }

        div {
            position: absolute;
            border-radius: 50%;
            margin: 0 auto;
            overflow: hidden;
        }

        .box1 {
            width: 500px;
            height: 300px;
            background-color: white;
            top: 0;
            left: 0;
        }

        .box2 {
            width: 460px;
            height: 260px;
            background-color: purple;
            top: 20px;
            left: 20px;
        }

        .box3 {
            width: 420px;
            height: 220px;
            background-color: blue;
            top: 20px;
            left: 20px;
        }

        .box4 {
            width: 380px;
            height: 180px;
            background-color: green;
            top: 20px;
            left: 20px;
        }

        .box5 {
            width: 340px;
            height: 140px;
            background-color: yellow;
            top: 20px;
            left: 20px;
        }

        .box6 {
            width: 300px;
            height: 100px;
            background-color: orange;
            top: 20px;
            left: 20px;
        }

        .box7 {
            width: 260px;
            height: 60px;
            background-color: white;
            top: 20px;
            left: 20px;
        }

        /* 边框颜色嵌套实现彩虹效果 */
        .s3 {
            overflow: hidden;
        }

        .box77 {
            width: 460px;
            height: 260px;
            border: 20px solid white;
        }

        .box8 {
            width: 420px;
            height: 220px;
            border: 20px solid purple;
        }

        .box9 {
            width: 380px;
            height: 180px;
            border: 20px solid blue;
        }

        .box10 {
            width: 340px;
            height: 140px;
            border: 20px solid green;
        }

        .box11 {
            width: 300px;
            height: 100px;
            border: 20px solid yellow;
        }

        .box12 {
            width: 260px;
            height: 60px;
            border: 20px solid orange;
        }

    </style>
</head>

<body>
    <!-- 渐变方式 -->
    <section class="wrap">
        <section class="s1"></section>

    </section>

    <!-- 子元素颜色嵌套 -->
    <section class="wrap">
        <section class="s2">
            <div class="box1">
                <div class="box2">
                    <div class="box3">
                        <div class="box4">
                            <div class="box5">
                                <div class="box6">
                                    <div class="box7"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </section>

    <!-- 边框颜色嵌套 -->
    <section class="wrap">
        <section class="s3">
            <div class="box77">
                <div class="box8">
                    <div class="box9">
                        <div class="box10">
                            <div class="box11">
                                <div class="box12"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </section>
</body>

</html>

图片：