用text-decoration设置
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
实例设置 h1、h2、h3、h4 元素的文本修饰：
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
在这里简单介绍两种情况： 一、将表单中的所有文本框都变为下划线，则在源代码中加入下列代码： 二、将表单中的某个文本框变为下划线，需要在对应文本框的input 中添加ID。具体代码格式如下： 1、表单源代码最前面加入下列该段代码： 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 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 值 3 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: solidborder-width: thin} span { border-style: solidborder-width: 1px thin} 5、border-top 语法： border-top : border-width || border-style || border-color 示例： div { border-bottom: 25px solid redborder-left: 25px solid yellowborder-right: 25px solid blueborder-top: 25px solid green} 6、border-top-color 语法： border-top-color : color 示例： 4 div { border-top-color: redborder-bottom-color: RGB(223, 94, 77)border-right-color: redborder-left-color: black} 7、border-top-style 语法： border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 示例： body { border-top-style: doubleborder-bottom-style: grooveborder-left-style: dashedborder-right-style: dotted} 8、border-top-width 语法： border-top-width : medium | thin | thick | length 示例： span { border-top-width: thinborder-top-style: solid} span { border-bottom-width: thinborder-bottom-style: solid} span { border-left-width: thinborder-left-style: solid} span { border-right-width: thinborder-right-style: solid} 9、border-right 语法： border-right : border-width || border-style || border-color 示例： div { border-bottom: 25px solid redborder-left: 25px solid yellowborder-right: 25px solid blueborder-top: 25px solid green} 10、border-right-color 语法： 5 border-right-color : color 示例： div { border-top-color: redborder-bottom-color: RGB(223, 94, 77)border-right-color: redborder-left-color: black} 11、border-right-style 语法： border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 示例： body { border-top-style: doubleborder-bottom-style: grooveborder-left-style: dashedborder-right-style: dotted} 12、border-right-width 语法： border-right-width : medium | thin | thick | length 示例： span { border-top-width: thinborder-top-style: solid} span { border-bottom-width: thinborder-bottom-style: solid} span { border-left-width: thinborder-left-style: solid} span { border-right-width: thinborder-right-style: solid} 13、border-bottom 语法： border-bottom : border-width || border-style || border-color 示例： div { border-bottom: 25px solid redborder-left: 25px solid yellowborder-right: 25px solid blueborder-top: 25px solid green} 6 14、border-bottom-color 语法： border-bottom-color : color 说明： 要使用该属性，必须先设定对象的height 或width 属性，或者设定position 属性为absolute。 示例： span { border-top-width: thinborder-top-style: solid} span { border-bottom-width: thinborder-bottom-style: solid} span { border-left-width: thinborder-left-style: solid} span { border-right-width: thinborder-right-style: solid} 17、border-left 语法： border-left : border-width || border-style || border-color 示例： div { border-bottom: 25px solid redborder-left: 25px solid yellowborder-right: 25px solid blueborder-top: 25px solid green} 18、border-left-color 语法： border-left-color : color 示例： div { border-top-color: redborder-bottom-color: RGB(223, 94, 77)border-right-color: redborder-left-color: black} 19、border-left-style 语法： border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 示例： body { border-top-style: doubleborder-bottom-style: grooveborder-left-style: dashed8 border-right-style: dotted} 20、border-left-width 语法： border-left-width : medium | thin | thick | length 示例： span { border-top-width: thinborder-top-style: solid} span { border-bottom-width: thinborder-bottom-style: solid} span { border-left-width: thinborder-left-style: solid} span { border-right-width: thinborder-right-style: solid}
