css如何制作表单 |css png图片颜色

form{
width: 500px;  //设置表单宽度
margin: 0 auto; //使表单在页面水平居中
background-color: #F7F2E0; //设置表单背景颜色
padding: 20px; //设置表单内部空白
border-radius: 10px; //设置表单圆角
}
.input {
display: block; //将表单元素变成块级元素
width: 100%; //设置表单元素宽度占满整个表单
padding: 10px; //设置表单元素内边距
margin-bottom: 10px; //设置表单元素之间的外边距
border-radius: 5px; //设置表单元素圆角
border: none; //去掉表单元素边框
background-color: #EBE7DD; //设置表单元素背景颜色 
}
.input:focus {
border: none; //去掉表单元素获取焦点时的外边框
box-shadow: 0 0 3px 0 rgba(26,75,144,0.5); //设置表单元素获取焦点时的边框阴影效果
}
.button {
display: block; //将按钮元素变成块级元素
width: 100%; //设置按钮元素宽度
padding: 10px; //设置按钮元素内边距
border: none; //去掉按钮元素边框
background-color: #1A4B90; //设置按钮元素背景色
color: #fff; //设置按钮文字颜色为白色
font-size: 16px; //设置按钮文字大小
cursor: pointer; //设置鼠标悬浮样式为手型
}
.button:hover {
background-color: #132D5F; //设置按钮元素鼠标悬浮时的背景颜色
}

上面代码展示了如何用CSS制作一个简单的表单，其中包括三个元素：输入框、密码框和提交按钮，表单元素可以根据自己的需求自定义样式。可以通过设置颜色、边框、阴影等方式，让表单更加美观和易于操作。

所以说，掌握CSS在制作表单上的应用技巧，不仅可以使表单更具有美观性，还可以让用户更加便捷地操作表单。因此，CSS对于在网页设计与排版上，的作用是不可替代的。