本篇文章给大家带来的内容是关于如何使用css布局一个登陆表单，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css布局制作一个登陆表单
这个案例主要制作的是一个登录表单，在这个案例中使用了box-shadow、gradient,transform和transition等属 性，其中最难的地方是输入框被咬的那部分，原本使用纯CSS3的渐变配合多背景制作，但受限于阴影，最终改变使用base的64位图像处理。详细的参考代 码吧：
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
CSS代码：body,ul{margin: 0;padding: 0}a {color: rgb（1, 124124, 185）；text-decoration: none;}input:focus {outline: none 0;}body{color: #b5b5b5;font: 14px 'Arial';}body,li:first-child:after,li:last-child:after{background-image: url（data:image/png;base64,…）；/**/}.box{position: relative;width: 384px;height: 140px;margin: 50px auto;}.box li{list-style-type: none;margin-bottom: 10px;border-radius: 5px;overflow: hidden;position: relative;height: 42px;}.box li input{box-shadow:inset 0 0 5px rgba（0,0,0,.5），-1px 1px 0 rgba（255,255,255,.05）；border:0 none;padding:8px 5px 5px;border-radius: 5px;width:300px;height: 28px;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;-o-box-sizing: content-box;-ms-box-sizing: content-box;box-sizing: content-box;background: rgba（0,0,0,.1）；color: #fff;}.box li:first-child:after,.box li:last-child:after{position: absolute;width: 50px;height: 50px;content: "";border-radius: 25px;z-index: 2;right: -23px;box-shadow: 0 0 8px rgba（0,0,0,.5）；}::-webkit-input-placeholder {color:#fff;font-weight: bold;}.box li:first-child:after{top: 15px;}.box li:last-child:after{bottom:15px;}.box label{width: 70px;display: inline-block;text-align: right;}.box span{display: block;color: #6296b4;padding-left: 75px;}.button{position: absolute;top: 24px;right: -30px;width: 44px;height: 44px;border-radius: 22px;border:1px solid #00a1d2;background: -webkit-linear-gradient（top,#029ecd,#0d7796）；color: #fff;text-shadow:1px 1px 0 #666;box-shadow:0 0 0 5px #2c2c2c;z-index: 3;text-align: center;line-height: 46px;-webkit-transition: all 0.28s ease-in;-moz--transition: all 0.28s ease-in;}.button:hover{-webkit-transform:rotate（90deg）；}@font-face {font-family: 'FontAwesome';src: url（'font/fontawesome-webfont.eot'）；src: url（'font/fontawesome-webfont.eot?#iefix'） format（'embedded-opentype'），url（'font/fontawesome-webfont.woff'） format（'woff'），url（'font/fontawesome-webfont.ttf'） format（'truetype'），url（'font/fontawesome-webfont.svg#FontAwesome'） format（'svg'）；font-weight: normal;font-style: normal;}.icon-arrow-right:before {font-family: FontAwesome;font-weight: normal;font-size: 26px;font-style: normal;display: inline-block;text-decoration: inherit;content: "f061";}
以上就是对如何使用css布局一个登陆表单的全部介绍，如果您想了解更多有关CSS教程，请关注PHP中文网。
以上就是如何使用css布局一个登陆表单的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613554.html
微信扫一扫 
支付宝扫一扫 
