如何用CSS實現文字框變下劃線

2021-03-04 00:29:42 字數 3371 閱讀 5059

表單設計中可以使用css來實現把文字框變為下劃線。在這裡簡單介紹兩種情況:

一、 將表單中的所有文字框都變為下劃線,則在源**中加入下列**:

二、 將表單中的某個文字框變為下劃線,需要在對應文字框的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

blockquote

p 2、border-color

語法:border-color : color

說明:如果提供全部四個引數值,將按上-右-下-左的順序作用於四個邊框。

如果只提供乙個,將用於全部的四條邊。

如果提供兩個,第乙個用於上-下,第二個用於左-右。

如果提供三個,第乙個用於上,第二個用於左-右,第三個用於下。

要使用該屬性,必須先設定物件的height或width屬性,或者設定position屬性為absolute。

如果border-width等於0或border-style設定為none,本屬性將失去作用。

示例:ody

body

body

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

span

5、border-top

語法:border-top : border-width || border-style || border-color

示例:div

6、border-top-color

語法:border-top-color : color

示例:div7、border-top-style

語法:border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

示例:body

8、border-top-width

語法:border-top-width : medium | thin | thick | length

示例:span

span

span

span

9、border-right

語法:border-right : border-width || border-style || border-color

示例:div

10、border-right-color

語法:border-right-color : color

示例:div

11、border-right-style

語法:border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

示例:body

12、border-right-width

語法:border-right-width : medium | thin | thick | length

示例:span

span

span

span

13、border-bottom

語法:border-bottom : border-width || border-style || border-color

示例:div

14、border-bottom-color

語法:border-bottom-color : color

說明:要使用該屬性,必須先設定物件的height或width屬性,或者設定position屬性為absolute。

如果border-width等於0或border-style設定為none,本屬性將失去作用。

示例:div

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

如何用flash製作文字動畫

1.文字大小變化效果 1 開啟flash軟體,新建乙個動畫,在 屬性 面板設定其寬 高為 500 200,背景色為 黑 確定 2 在圖層1第1幀點 檔案 匯入 選擇你要匯入的背景 點 開啟 在第30幀 插入幀 3 點 插入 新建元件 名稱 填上 文字 行為 圖形 確定 4 在圖層1的第1幀選擇 工具...

CSS中文字大小的pt px的區別詳解

先搞清基本概念 px就是表示pixel,畫素,是螢幕上顯示資料的最基本的點 而pt就是point,是印刷行業常用單位,等於1 72英吋。這樣很明白,px是乙個點,它不是自然界的長度單位,誰能說出乙個 點 有多長多大麼?可以畫的很小,也可以很大。如果點很小,那畫面就清晰,我們稱它為 解析度高 反之,就...

如何用製作簡歷

word製作簡歷 簡歷是應聘工作的敲門磚,如何用word製作簡歷呢?下面具體介紹用word製作簡歷的過程。製作複雜 的一般操作步驟 初始化頁面 為 新增標題 調整字元寬度 即點即輸 插入 插入 的兩種方法 自動套用格式 修改 結構 選定 行 列 單元格 繪製 拆分 合併單元格 調整行高列寬 輸入 內...