如何用CSS3制作一个漂亮的登录框_html/css_WEB-ITnose
DEMO
漂亮的登录框
作为一个新手，个人觉得难点在：1.阴影的使用（外框，账户栏，密码栏，button）2.账户栏，密码栏的布局3.button颜色渐变下面给出一些思路，也希望大家提供一些简洁的方法帮助更多的新手。
HTML 代码如下：
<body> <div class="wrapper"> <div class="header">Login to <span>love.ly</span></div> <form action="" method="post"> <ul> <li> <div class="text"> <span class="yonghu"></span><input type="text" placeholder="IconDeposit"> </div> </li> <li> <div class="password"> <span class="mima"></span><input type="password" placeholder="••••••••••••••"> </div> </li> <li class="remember"> <input type="checkbox">Remember Me </li> <li> <a href="">Forgot username or password?</a> </li> <li> <input type="button" value="Login"> </li> </ul> </form> <div class="footer"> <p>Love.ly Personal Blog .PSD Template <a href="">Copyright ©2012 Matt Gentile</a></p> <p><a href="">Love.ly Home</a> | <a href="">Bolg </a> | <a href="">Work</a> | <a href="">Terms of Use</a> | <a href="">Contact Me</a></p> </div> </div></body>
背景框样式：
背景
form{ background: #cccccc; width: 260px; height: 260px; margin: 35px auto; padding: 30px; box-shadow:0px 1px 2px 1px #aaaaaa, inset 0px 1px 1px rgba(255,255,255,0.7); border-radius: 3px; }box-shadow语法：
E {box-shadow: <length> <length> <length>?<length>?||<color>}也就是：E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说：对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}box-shadow取值：阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
账户栏，密码栏的布局：
用户栏、密码栏
账户栏，密码栏的阴影同上面的背景框的做法，就不多解释了，难点主要在如何在focus这两个input的时候如何改变整个账户栏，密码栏背景颜色。因为我们在focus的时候账户栏，密码栏中前面的小图标不能消失，所以我们用一个span标签将icon放置到input标签前面。HTML代码如下：
<li> <div class="text"> <span class="yonghu"></span><input type="text" placeholder="IconDeposit"> </div></li><li> <div class="password"> <span class="mima"></span><input type="password" placeholder="••••••••••••••"> </div></li>
为了达到focus的效果我们需要把input的大小调整到和div.text同样大小，这时我们发现span标签会一直占据input前面的空间，这时我们需要span使用position:absolute使其脱离文档流，调整好icon的位置后，对input使用padding-left使placeholder，以及我们focus时输入的内容右移，然后整个input就充满了账户栏，密码栏。具体的CSS样式如下：
ul li div{ width: 260px; height: 40px; background: #e1dcd8; color: rgb(98,94,91); box-shadow: inset 0px 2px 5px #aaaaaa; border-radius: 5px; position: relative;}ul li .yonghu{ font-family: iconfont; position: absolute; top: 12px; left: 10px;}ul li .mima{ font-family: iconfont; position: absolute; top: 12px; left: 10px;}ul li div input{ height: 40px; width: 190px; padding: 0 35px; border: none; background: #e1dcd8; color: rgb(98,94,91); box-shadow: 0px 1px 1px rgba(255,255,255,0.7), inset 0px 2px 5px #aaaaaa; border-radius: 5px;}ul li input:focus{ outline: none; background: #f5f2ef;}button颜色渐变：
button
button:hover
button:active
我们需要先将将button的样式做出来，这里介绍一下CSS3的背景渐变属性linear-gradient：语法：
<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);<point>：[ left | right ]? [ top | bottom ]? || <angle>?<color-stop>：<color> [ <length> | <percentage> ]?
取值：
left：设置左边为渐变起点的横坐标值。right：设置右边为渐变起点的横坐标值。top：设置顶部为渐变起点的纵坐标值。bottom：设置底部为渐变起点的纵坐标值。 <angle>：用角度值指定渐变的方向（或角度）。 <color-stop>：指定渐变的起止颜色。 <color>：指定颜色。请参阅颜色值 <length>：用长度值指定起止色位置。不允许负值 <percentage>：用百分比指定起止色位置。
这个取色是一个比较繁琐的过程，这里可以给大家推荐一款比较讨巧的方法，使用button生成器，制作好以后把代码复制过来就好了。然后加上hover，active样式我们的button就完成了。下面是button的CSS样式：
ul li input[type*="button"]{ width: 100%; height: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff; background: -moz-linear-gradient( top, #94aa64 0%, #7a924a 50%, #607738); background: -webkit-gradient( linear, left top, left bottom, from(#94aa64), color-stop(0.50, #7a924a), to(#607738)); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #7d8862; -moz-box-shadow: 0px 1px 0px rgba(170,170,170,1), inset 0px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 0px rgba(170,170,170,1), inset 0px 1px 1px rgba(255,255,255,0.7); box-shadow: 0px 1px 0px rgba(170,170,170,1), inset 0px 1px 1px rgba(255,255,255,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);}ul li input[type*="button"]:hover{ opacity: 0.8;}ul li input[type*="button"]:active{ width: 100%; height: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff; background: -moz-linear-gradient( top, #607738 0%, #7a924a 50%, #94aa64 ); background: -webkit-gradient( linear, left top, left bottom, from(#607738), color-stop(0.50, #7a924a), to(#94aa64)); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #7d8862; -moz-box-shadow: 0px -1px 0px rgba(170,170,170,1), inset 0px -1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: 0px -1px 0px rgba(170,170,170,1), inset 0px -1px 1px rgba(255,255,255,0.7); box-shadow: 0px -1px 0px rgba(170,170,170,1), inset 0px -1px 1px rgba(255,255,255,0.7); text-shadow: 0px 1px 0px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);}为了方便大家这里把整个DEMO的CSS链接给出：CSS。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
