工作流如何用css实现文本框变下划线.docx
- 文档编号:29154012
- 上传时间:2023-07-20
- 格式:DOCX
- 页数:10
- 大小:16.01KB
工作流如何用css实现文本框变下划线.docx
《工作流如何用css实现文本框变下划线.docx》由会员分享,可在线阅读,更多相关《工作流如何用css实现文本框变下划线.docx(10页珍藏版)》请在冰豆网上搜索。
工作流如何用css实现文本框变下划线
用CSS实现文本框变为下划线
表单设计中可以使用CSS来实现把文本框变为下划线。
在这里简单介绍两种情况:
一、将表单中的所有文本框都变为下划线,则在源代码中加入下列代码:
Input{
border:
1pxsolid;//边框1粗细线
border-top:
0px;border-left:
0px;border-right:
0px;//把文本框的上边框、左边框、右边框都设置为0,只留下边框
}
二、将表单中的某个文本框变为下划线,需要在对应文本框的input中添加ID。
具体代码格式如下:
1、表单源代码最前面加入下列该段代码:
#aaa{
border:
1pxsolid;border-top:
0px;border-left:
0px;border-right:
0px;}
2、该文本框的input中加入id,如下所示:
三、Css中边框Border属性汇总:
1、border
语法:
border:
border-width||border-style||border-color
说明:
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为:
mediumnone。
border-color的默认值将采用文本颜色。
要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute
示例:
p{border:
thickdoubleyellow;}
blockquote{border:
dottedgray;}
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:
silverredRGB(223,94,77);}
body{border-color:
silverredRGB(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:
1pxthin;}
5、border-top
语法:
border-top:
border-width||border-style||border-color
示例:
div{border-bottom:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
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:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
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:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
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:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
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-left-width
语法:
border-left-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;}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 工作流 何用 css 实现 文本框 下划线