css实现圆形登录表单页面效果代码

代码语言:html

所属分类:表单美化

代码描述:css实现圆形登录表单页面效果代码

代码标签: css 圆形 登录 表单

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
*,*:before,*:after{box-sizing:border-box}body{background:url("//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png") no-repeat center center fixed;background-size:cover;font:13px/23px "Lato",Arial,sans-serif;color:#a6a4a2;padding:40px 0}.container{margin:0 auto;width:500px;height:500px;background:white;border-radius:500px;border:8px solid rgba(245,245,245,0.5);-webkit-background-clip:padding-box;background-clip:padding-box}hr{border:0;height:1px;background:#e9e6e2;margin:15px 100px}a{text-decoration:none;color:#b993d6}a:hover{text-decoration:underline;color:#c5a5dd}.header{text-align:center;margin-top:70px;font-size:16px}.header .login{color:#b993d6;text-transform:uppercase;margin-right:5px}.header .signup{color:#6c6763;text-transform:uppercase;margin-left:5px}input{outline:0;display:block;width:70%;border:1px solid #d9d9d9;border:0;border-radius:3px;background:#f7f6f5;margin:20px auto;padding:18px 15px}input[type=submit]{width:35%;color:white;font-size:15px;border-radius:5px;background:linear-gradient(#af96d4,#9b88b9);cursor:poin.........完整代码请登录后点击上方下载按钮下载查看

网友评论0