div+css实现一个简洁联系表单效果代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现一个简洁联系表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
*, *:before, *:after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body
{
background:
linear-gradient(
limegreen,
transparent
),
linear-gradient(
90deg,
skyblue,
transparent
),
linear-gradient(
-90deg,
coral,
transparent
);
background-blend-mode: screen;
font-size: 16px;
}
body, button, input {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: 1.4px;
}
.background {
display: flex;
min-height: 100vh;
}
.container {
flex: 0 1 700px;
margin: auto;
padding: 10px;
}
.screen {
position: relative;
background: #3e3e3e;
border-radius: 15px;
}
.screen:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 20px;
right: 20px;
bottom: 0;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
z-index: -1;
}
.screen-header {
display: flex;
alig.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0