虽然CSS样式的学习需要我们动手多实践，需要多做案例，思致思考，但有时候注意资料的收集与整理也是非常重要的，在实际开发中往往会起到事半功倍的效果。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。
一、按钮样式
.buttoncss{
font-family:"tahoma","宋体";/**/
font-size:9pt;color:#003399;
border:1px#003399
color:#006699;
border-bottom:#93bee21px
border-left:#93bee21px
border-right:#93bee21px
border-top:#93bee21px
background-image:url(../images/bluebuttonbg.gif);
background-color:#e8f4ff;
cursor:
font-style:normal
width:60px;
height:22px;
}
二、蓝色按钮
.bluebuttoncss{
font-family:"tahoma","宋体";/**/
font-size:color:#003366;
border:0px#93bee2
border-bottom:#93bee21px
border-left:#93bee21px
border-right:#93bee21px
border-top:#93bee21px*/
background-image:url(../images/blue_button_bg.gif);
background-color:#ffffff;
cursor:
font-style:normal
}
三、红色按钮
.redbuttoncss{
font-family:"tahoma","宋体";/**/
font-size:color:#0066cc;
border:1px#93bee2
border-bottom:#93bee21px
border-left:#93bee21px
border-right:#93bee21px
border-top:#93bee21px
background-image:url(../images/redbuttonbg.gif);
background-color:#ffffff;
cursor:
font-style:normal
}
四、选择按钮
.selectbuttoncss{
font-family:"tahoma","宋体";/**/
font-size:color:#0066cc;
border:1px#93bee2
border-bottom:#93bee21px
border-left:#93bee21px
border-right:#93bee21px
border-top:#93bee21px
background-image:url(../images/blue_button_bg.gif);
background-color:#ffffff;
cursor:
font-style:normal
}
五、绿色按钮
.greenbuttoncss{
font-family:"tahoma","宋体";/**/
font-size:color:#0066cc;
border:1px#93bee2
border-bottom:#93bee21px
border-left:#93bee21px
border-right:#93bee21px
border-top:#93bee21px
background-image:url(../images/greenbuttonbg.gif);
background-color:#ffffff;
cursor:
font-style:normal
}
六、图像按钮
.imagebutton{
cursor:/*改变鼠标形状*/
}
七、页面正文
body{
scrollbar-face-color:#ededf3;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#93949f;
scrollbar-3dlight-color:#ededf3;
scrollbar-arrow-color:#082468;
scrollbar-track-color:#f7f7f9;
scrollbar-darkshadow-color:#ededf3;
font-size:/**/
color:#003366;
overflow:auto;
}
td{font-size:12px}
th{
font-size:
}
八、下拉选择框
select{
border-right:#0000001px
border-top:#ffffff1px
font-size:/**/
border-left:#ffffff1px
color:#003366;
border-bottom:#0000001px
background-color:#f4f4f4;
}
九、线条文本编辑框
.editbox{
background:#ffffff;
border:1pxsolid#b7b7b7;
color:#003366;
cursor:
font-family:"arial";
font-size:
height:
padding:/**/
}
十、多行文本框
.multieditbox{
background:#f8f8f8;
border-bottom:#b7b7b71px
border-left:#b7b7b71px
border-right:#b7b7b71px
border-top:#b7b7b71px
color:#000000;
cursor:
font-family:"arial";
font-size:
padding:/**/
}
十一、阴影风格的表单
.shadow{
position:absolute;
z-index:1000;
top:0px;
left:0px;/**/
background:gray;
background-color:#ffcc00;
filter:progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);
}
十二、只显一条横线的输入框
.logintxt{
border-right:#ffffff0px
border-top:#ffffff0px
font-size:/**/
border-left:#ffffff0px
border-bottom:#c0c0c01px
background-color:#ffffff
}
十三、没有边框的输入框
.noneinput{
text-align:center;
width:99%;height:99%;
border-top-style:
border-right-style:
border-left-style:
background-color:#f6f6f6;
border-bottom-style:
}
【13种常用按钮、文本框、表单等CSS样式】相关文章：
★ li不显示使用overflow:hidden导致Li前面点、圈等样式不见