如何为网站登录面板添加带曲线的彩色头部及指定文本

Hey there! Let's get that curved, colorful header added to your login panel—we'll use pure CSS so you don't have to mess with image files, which is way easier for beginners. I'll break this down step by step so you can follow along.

Step 1: Update Your HTML #

First, we need to add the header element inside your login form to hold the "enter data" text. Here's the updated code:

<form class="login">
  <div class="login-header">enter data</div>
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button>Login</button>
</form>

Step 2: Adjust Your CSS #

Now let's tweak the CSS to style the curved header and fix the form layout to make space for it. I've updated your original code with comments explaining what each part does:

body { 
  background-color: #f45b69; 
  font-family: "Asap", sans-serif; 
  margin: 0; /* Remove default body margin to avoid extra space */
}

.login { 
  overflow: hidden; 
  background-color: white; /* Swapped blue for white to make the header pop */
  padding: 80px 30px 30px 30px; /* Increased top padding to fit the header */
  border-radius: 10px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 400px; 
  transform: translate(-50%, -50%); 
  box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2); 
}

/* This is the new curved header style */
.login-header {
  background-color: #456990; /* Change this hex code to pick your favorite color! */
  color: white;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  padding: 15px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* These two lines create the curved bottom edge */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.login::before, .login::after { 
  content: ''; 
  position: absolute; 
  width: 600px; 
  height: 600px; 
  border-top-left-radius: 40%; 
  border-top-right-radius: 45%; 
  border-bottom-left-radius: 35%; 
  border-bottom-right-radius: 40%; 
  z-index: -1; 
}

.login::before { 
  left: 40%; 
  bottom: -130%; 
  background-color: rgba(69, 105, 144, 0.15); 
}

.login::after { 
  left: 35%; 
  bottom: -125%; 
  background-color: rgba(2, 128, 144, 0.2); 
}

.login > input { 
  font-family: "Asap", sans-serif; 
  display: block; 
  border-radius: 5px; 
  font-size: 16px; 
  background: #f0f0f0; /* Light gray input background for better contrast */
  width: 100%; 
  border: 0; 
  padding: 10px; 
  margin: 15px 0; /* Fixed negative margin to avoid input overflow */
}

.login > button { 
  font-family: "Asap", sans-serif; 
  cursor: pointer; 
  color: #fff; 
  font-size: 16px; 
  text-transform: uppercase; 
  width: 100%; /* Made button full-width for a cleaner look */
  border: 0; 
  padding: 10px 0; 
  margin-top: 10px; 
  border-radius: 5px; 
  background-color: #f45b69; 
}

.login > button:hover { 
  background-color: #f24353; 
}

a { 
  text-decoration: none; 
  color: rgba(0,0,0,0.6); /* Darkened link color to be visible on white */
  position: absolute; 
  right: 10px; 
  bottom: 10px; 
  font-size: 12px; 
}

Quick Notes for Customization #

• To change the header color, just replace #456990 with any hex color code you like (you can find free color pickers online if you need ideas)
• If you want a more dramatic curve, adjust the values in border-bottom-left-radius and border-bottom-right-radius (higher numbers = more curve)

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