[工作流]如何用CSS实现文本框变下划线.doc

用CSS实现文本框变为下划线表单设计中可以使用CSS来实现把文本框变为下划线。在这里简单介绍两种情况：一、 将表单中的所有文本框都变为下划线，则在源代码中加入下列代码： Input border:1px solid;/边框 1粗 细线 border-top:0px; border-left:0px;border-right:0px; /把文本框的上边框、左边框、右边框都设置为0，只留下边框 二、 将表单中的某个文本框变为下划线，需要在对应文本框的input中添加ID。具体代码格式如下：1、表单源代码最前面加入下列该段代码： #aaa border:1px solid; border-top:0px; border-left:0px;border-right:0px; 2、该文本框的input中加入id，如下所示：三、 Css中边框Border属性汇总：1、border语法：border : border-width | border-style | border-color 说明：如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：medium none。border-color的默认值将采用文本颜色。要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute示例：p border: thick double yellow; blockquote border: dotted gray; p border: 25px; 2、border-color语法：border-color : color 说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-width等于0或border-style设置为none，本属性将失去作用。示例：ody border-color: silver ;red; body border-color: silver red RGB(223, 94, 77); body border-color: silver red RGB(223, 94, 77) black; 3、border-style语法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-width不大于0，本属性将失去作用。参数：none : 无边框。与任何指定的border-width值无关hidden : 隐藏边框。IE不支持dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线solid : 实线边框double : 双线边框。两条单线与其间隔的和等于指定的border-width值groove : 根据border-color的值画3D凹槽ridge : 根据border-color的值画菱形边框inset : 根据border-color的值画3D凹边outset : 根据border-color的值画3D凸边4、border-width语法：border-width : medium | thin | thick | length参数：medium : 默认宽度thin : 小于默认宽度thick : 大于默认宽度length : 由浮点数字和单位标识符组成的长度值。不可为负值。示例：span border-style: solid; border-width: thin; span border-style: solid; border-width: 1px thin; 5、border-top语法：border-top : border-width | border-style | border-color 示例：div border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; 6、border-top-color语法：border-top-color : color 示例：div border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;7、border-top-style语法：border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset示例：body border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; 8、border-top-width语法：border-top-width : medium | thin | thick | length示例：span border-top-width: thin; border-top-style: solid; span border-bottom-width: thin; border-bottom-style: solid; span border-left-width: thin; border-left-style: solid; span border-right-width: thin; border-right-style: solid; 9、border-right语法：border-right : border-width | border-style | border-color 示例：div border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; 10、border-right-color语法：border-right-color : color示例：div border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;11、border-right-style语法：border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset示例：body border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; 12、border-right-width语法：border-right-width : medium | thin | thick | length示例：span border-top-width: thin; border-top-style: solid; span border-bottom-width: thin; border-bottom-style: solid; span border-left-width: thin; border-left-style: solid; span border-right-width: thin; border-right-style: solid; 13、border-bottom语法：border-bottom : border-width | border-style | border-color 示例：div border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; 14、border-bottom-color语法：border-bottom-color : color说明：要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-width等于0或border-style设置为none，本属性将失去作用。示例：div border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;15、border-bottom-style语法：border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset说明：要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-width不大于0，本属性将失去作用。示例：body border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; 16、border-bottom-width语法：border-bottom-width : medium | thin | thick | length说明：要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-style设置为none，本属性将失去作用。示例：span border-top-width: thin; border-top-style: solid; span border-bottom-width: thin; border-bottom-style: solid; span border-left-width: thin; border-left-style: solid; span border-right-width: thin; border-right-style: solid; 17、border-left语法：border-left : border-width | border-style | border-color 示例：div border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; 18、border-left-color语法：border-left-color : color示例：div border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;19、border-left-style语法：border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset示例：body border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; 20、border-le