通过使用 CSS3 进行试验,我创建了一个带有矩形边框和阴影效果的小型样式表注册表单。 唯一使用的图像不是钥匙,而是用作表单本身背景图像的笔。
CSS 代码有很多 CSS3 元素表单css样式,这种形式只能在支持 CSS3 的浏览器中工作(但它们不支持):
form.registration{ width:600px; float:left; color:#818181; background: #f1f1f1 url(pen.png) no-repeat top right; border: 2px solid #ccc; padding:10px; font-family: Georgia; font-size: 14px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-border-radius: 15px; -webkit-border-radius: 15px; }
该表将有一个方形边框和一个包阴影,使用 rgba 值看起来很有趣。 接下来,我们定义自定义数组的放置方式:
form.registration fieldset{ border-top:1px solid #ccc; border-left:0; border-bottom:0; border-right:0; padding:6px; margin:0px 30px 0px 0px; }
图例将给出自定义名称数组,我们希望颜色不那么强烈:
form.registration legend{ text-align:left; color:#ccc; font-size:18px; padding:0px 4px 0px 4px; margin-left:20px; }
现在表单css样式,让我们定义表单的其余部分:
form.registration label{ font-size: 32px; width:200px; float: left; text-align: right; color:#999; clear:left; margin:4px 4px 0px 0px; padding:0px; } form.registration input{ font-family: Georgia; font-size: 28px; float:left; width:300px; border:1px solid #cccccc; margin:2px 0px 2px 2px; color:#00abdf; height:32px; padding:3px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; } form.registration input:focus, form.registration select:focus{ background-color:#E0E6FF; } form.registration select{ font-family: Georgia; font-size: 28px; float:left; border:1px solid #cccccc; margin:2px 0px 2px 2px; color:#00abdf; height:40px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; }
现在,让我们为 CSS3 按钮定义一些样式:
.button, .button:visited{ float:right; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); cursor: pointer; padding: 5px 10px 5px 5px; color: #fff; text-decoration: none; font-size: 32px; padding: 10px 15px; background-color: #00abdf; display: inline-block; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .button:hover{ background-color: #777; }
html代码如下:
享受!
发表评论