老师，这样写可以吗，有什么要改进吗

来源：2-28 项目作业

dawn_eve

2021-10-13 11:05:20

<style>

        /* 方法一 */
        /* .content{
            position: relative;
            background-color:rgba(25,25,255,0.1);
            width:300px;
            height: 100px;
            overflow: hidden;
        }
        .same{
            border-radius: 50%;
            padding-left: 80px;
        }
        .box1{
            position: absolute;
            width: 200px;
            height: 200px;
            border:10px solid purple;
            top:0px;
        }
        .box2{
            position: absolute;
            width: 180px;
            height: 180px;
            border:10px solid blue;
            top:10px;
            left: 10px;
        }
        .box3{
            position: absolute;
            width: 160px;
            height: 160px;
            border:10px solid green;
            top:20px;
            left: 20px;
        }
        .box4{
            position: absolute;
            width: 140px;
            height: 140px;
            border:10px solid yellow;
            top:30px;
            left: 30px;
        }
        .box5{
            position: absolute;
            width: 120px;
            height: 120px;
            border:10px solid orange;
            top:40px;
            left: 40px;
        } */

        /* 方法二 */
        div.content{
            width: 200px;
            height: 100px;
            overflow:hidden;
        }
        div.box{
            width: 200px;
            height: 200px;
            background-image:radial-gradient(50% 50%,transparent 50%,orange 60%,yellow 70%,green 80%,blue 90%,purple 95%,transparent);
        }
    </style>
</head>
<body>

    <!-- 方法一 -->
    <!-- <div class="content">
        <div class="box1 same"></div>
        <div class="box2 same"></div>
        <div class="box3 same"></div>
        <div class="box4 same"></div>
        <div class="box5 same"></div>  
    </div> -->

    <!-- 方法二 -->
    <div class="content">
        <div class="box"></div>
    </div>
</body>