CSS 样式美化表单:灰色背景、居中对齐、圆角和阴影
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial', sans-serif;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label {
margin-bottom: 10px;
}
input[type='password'] {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
box-sizing: border-box;
}
button {
margin-top: 20px;
padding: 10px 20px;
border-radius: 5px;
background-color: #2ecc71;
color: #fff;
font-size: 16px;
border: none;
cursor: pointer;
box-sizing: border-box;
}
.refresh-button {
background-color: #4CAF50; /* 按钮背景色 */
color: white; /* 按钮文本颜色 */
border: none; /* 去掉边框 */
padding: 10px 20px; /* 按钮内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block; /* 内联块级元素 */
font-size: 16px; /* 文字大小 */
border-radius: 5px; /* 圆角 */
cursor: pointer; /* 鼠标悬停样式 */
transition: background-color 0.3s ease; /* 过渡效果 */
}
.refresh-button:hover {
background-color: #3e8e41; /* 鼠标悬停背景色 */
}
</style>该样式为一个灰色背景、居中对齐的表单,包含一个输入密码的文本框和一个提交按钮。表单背景为白色,带有圆角和阴影效果。文本框和按钮都带有圆角和边框,按钮为绿色,带有悬停效果。另外,整个页面使用了 'Arial' 字体。
原文地址: https://www.cveoy.top/t/topic/mmYr 著作权归作者所有。请勿转载和采集!