为何页面中两个circle类div无法显示？附HTML/CSS代码

问题原因分析 #

1. 类名错误：HTML中两个圆形div都使用了c1类，第二个圆形应使用c2类，否则无法应用对应的定位样式。
2. 父元素定位缺失：.outer-box未设置position: relative，导致绝对定位的圆形相对于<body>定位，位置不符合预期。
3. 渐变语法错误：linear-gradient属性中颜色值之间缺少逗号，导致渐变背景不生效，圆形无视觉效果。
4. 圆角值不够灵活：使用border-radius: 100px仅在宽高为200px时是圆形，若尺寸变化会失效，建议改用50%确保始终为圆形。

修复后的代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-box">
        <div class="inner-box">
            <header class="signup_header">
                <h1>Signup!!!</h1>
                <p>It will only takes 30 seconds</p>
            </header>
                <main class="signup_body">
                    <form action="#">
                        <p>
                            <label for="first_name">First Name:</label>
                            <input type="text" id="first_name" placeholder="ABC">
                        </p>
                        <p>
                            <label for="last_name">Last Name:</label>
                            <input type="text" id="last_name" placeholder="XYZ">
                        </p>
                        <p>
                            <label for="email">Email:</label>
                            <input type="email" id="email" placeholder="ABC.XYZ@anything.com">
                        </p>
                        <p>
                            <label for="password">Password:</label>
                            <input type="password" id="password" placeholder="at least 8 characters" required>
                        </p>
                        <p>
                            <input type="submit" id="submit" value="create account">
                        </p>
                    </form>
                </main>
                <footer class="signup_footer">
                    <p>
                        Already have an account?
                        <a href="#login">login</a>
                    </p>
                </footer>
        </div>
        <div class="circle c1"></div>
        <div class="circle c2"></div> <!-- 修正类名为c2 -->
    </div>
</body>
</html>

CSS代码

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}
.outer-box{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to top left,rgb(49, 220, 166),rgb(165, 195, 236));
    position: relative; /* 添加相对定位，使子元素绝对定位基于此容器 */
}
.inner-box{
    width: 400px;
    margin: 0 auto;
    position: relative;
    top: 40%;
    transform: translateY(-50%);
    padding: 20px 40px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 2px 2px 5px #2773a5;
    z-index: 2;
}
.signup_header h1{
    font-size: 2.5rem;
    color: black;
}
.signup_header p{
    font-size:0.8rem;
    color: #555;
    margin-top:5px;
}
.signup_body{
    margin:20px 0;

}
.signup_body p{
    margin:10px 0;
}
.signup_body p label{
    display: block;
    font-weight: bold;
}
.signup_body p input{
    width: 100%;
    padding: 1px;
    border: 1px solid black;
    border-radius: 4px;
    font-size: 1rem;
    /* margin-top: 4px; */
}
.signup_body p input[type="submit"]{
    background-color: #3498db;
    color: #ffffff;
    padding-bottom: 5px;
    cursor: pointer;
    border:none;
}
.signup_body p input[type="submit"]:hover{
    background-color: #23628c;
}
.signup_footer p {
    color: #555;
    text-align: center;
}
.signup_footer p a{
    color:#1c0ee3;
}
.circle{
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 使用50%确保始终为圆形 */
    background: linear-gradient(to top right, #ffffffaa, #ffffff); /* 修正渐变语法，调整颜色更明显 */
    position: absolute;
}
.c1 {
    top: 100px;
    left: 30%;
}

.c2 {
    bottom: 200px;
    right: 40%;
}

额外优化建议 #

• 输入框的padding值过小（仅1px），建议调整为8px 12px提升输入体验
• 提交按钮可添加padding: 8px 0让点击区域更大

内容的提问来源于stack exchange，提问作者Souvik