各种边框样式。。本以为border不是这么用的。

最新推荐文章于 2024-04-28 16:04:57 发布

转载最新推荐文章于 2024-04-28 16:04:57 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/piperck/p/4437041.html

本文详细介绍多种文本框和按钮的样式设置方法，包括显示虚线边框、实线边框、无边框、仅有下划线及带背景图片的文本框等。此外还介绍了不同样式的按钮实现技巧。

关于文本框样式
□ 文本框样式 □
显示虚线边框的文本框(IE5.5才可看到效果)

<INPUT style="border-width: 1px,1px,1px,1px;border: 1px dashed">
或
<input style="BORDER-BOTTOM: #000000 1px dashed; BORDER-LEFT: #000000 1px dashed; BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 1px dashed">

边框为实线的文本框

<INPUT style="border-width: 1px,1px,1px,1px;border: 1px solid" VALUE="2001-3-18">

没有边框的的文本框
<INPUT style="border-style: none" VALUE="2001-3-18">

只有下划线的文本框
<INPUT style="border-color: #3333FF #FF3333 #000000 #FF33FF; border-width: 0pt; border-right-width: 0pt; border-bottom-width: 1pt; border-left-width: 0pt"  VALUE="2001-3-18">

下划线为虚线的文本框(IE5.5以上浏览器才可看到效果)
  <INPUT STYLE="BORDER-BOTTOM: #000000 1px dashed; BORDER-LEFT: 0px; BORDER-RIGHT:0px; BORDER-TOP:0px"  VALUE="2001-3-18">

有背景图片的文本框
<INPUT STYLE="background-image: url(图片)" VALUE="2001-3-18">

□ 按钮样式 □
没有边框的按钮

<INPUT TYPE="BUTTON" VALUE="按钮" style="border-style: none">

细边框的按钮
<INPUT TYPE="BUTTON" VALUE="按钮" STYLE="border-width: 1px,1px,1px,1px" >