国产精品yy9299在线观看_yin男乱女_长津湖手机免费完整版在线观看_古装一级淫片a免费播放口

合肥市高新區(qū)長江西路與科學(xué)大道交口5F創(chuàng)業(yè)園A座309
136 5560 1775

在CSS中使用邊框(邊框CSS寫法大全)

發(fā)表日期:2009-12-20 瀏覽次數(shù):3825次

邊框在CSS中用border表示,它是CSS的一個(gè)屬性,用它可以給能確定范圍的HTML標(biāo)記(如TD、DIV等等)畫邊框,它可以定義邊框線的類型、寬度和顏色,利用這個(gè)特性,可以制作一些特殊效果。下面將通過實(shí) 例來說明其應(yīng)用技巧。
1、給文本加邊框
上面的示例中,給一段文字加了不同的邊框,只是為了說明邊框線的顏色、粗細(xì)是可變的。第一個(gè)邊框的CSS代碼是:style= "border:thin solid red";“border”后面的三個(gè)參數(shù)的含義是:邊框線的寬度是:thin(細(xì)線);邊框線的類型: solid(實(shí)線);邊框線的顏色:red(紅色)。我們定義邊框,實(shí)際上就是設(shè)定這三個(gè)參數(shù)值。
邊框線的寬度有三個(gè)標(biāo)準(zhǔn)值:thin(細(xì)線)、medium(中粗線)和thick(粗線),此外,也可以自定義寬度,如:1pt、5px、2cm等。
邊框線的類型有九個(gè)確定值:none(無邊框線)、 dotted(由點(diǎn)組成的虛線)、 dashed(由短線組成的虛線)、 solid (實(shí)線)、 double(雙線,雙線寬度加上它們之間的空白部分的寬度就等于border-width定義的寬度)、 groove(3D溝槽狀的邊 框)、 ridge(3D脊?fàn)畹倪吙颍?inset(3D內(nèi)嵌邊框,顏色較深)、 outset(3D外嵌邊框,顏色較淺),注意:如果系統(tǒng)不支持這些 邊框的屬性值,那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都會(huì)被 “solid”代替。
邊框線的顏色:可以用十六進(jìn)制的顏色代碼,如#00ffcc。
從上面可以看出,給文本加邊框確實(shí)很簡單,上例中后面那幾個(gè)邊框的設(shè)置,我不講你也明白了吧!在這里告訴你一點(diǎn)小技巧,給一段文本加邊框,可 把CSS加在〈P〉標(biāo)記里;給幾段文本加邊框,先把那幾段文本用DIV標(biāo)記括起來,再把CSS加在〈DIV〉標(biāo)記里;若是要給一行文本加幾個(gè)不同的邊框, 則需要把文本放在表格里,再把CSS分別加到〈TD〉標(biāo)記里。

2、給導(dǎo)航菜單加分隔線
上面這個(gè)例子中的小白線,當(dāng)然可以用圖象來做,但我在這里是用CSS的“border”的擴(kuò)展屬性畫了邊框的一條邊,這樣代碼要少的多。畫邊框的單邊與上例的邊框的四條邊類似,一個(gè)邊框的四條邊的屬性如下:
邊框線名稱:border-top(上邊框線)、border-right(右邊框線)、border-bottom(下邊框線)和 boder-left(左邊框線);每條邊框線的類型、寬度和顏色的取值與“boder”屬性相同。如本例中要定義每個(gè)單元格的左邊框線為白色線,線的寬 度為“1px”的實(shí)線,則CSS代碼是這樣的:style="border-left: 1px solid #ffffff"。在單獨(dú)定義邊框線時(shí),若 不給出某個(gè)值,那么就取其默認(rèn)的初始值。在dreamweaver中定義CSS非常方便,不用編寫代碼;把常用的邊框線一次定義好,放在外連式CSS文件 中,要用時(shí)調(diào)用一下就行了,非常方便。

3、在一個(gè)邊框中采用不同寬度和顏色的邊框線
在本例中的效果,當(dāng)然可以用上例中的方法來實(shí)現(xiàn),但那樣代碼過多,可采用另一種合并的方法,把四條邊的屬性值分類放在一起,如本例的代碼是這樣的:
style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。
從上面可以看出,我把邊框線的類型、寬度和顏色歸類在一起定義了,這里請(qǐng)注意幾點(diǎn):
一、四條邊框線的位置順序是:上邊框線、右邊框線、下邊框線、左邊框線;
二、我在本例中邊框線的類型只取了一種實(shí)線類型,實(shí)際上四條邊也可以分別定義不同的類型;
三、屬性值可以定義一個(gè)、兩個(gè)、三個(gè)或者四個(gè)。如果僅定義一個(gè)屬性值,則其余三個(gè)自動(dòng)取相同值,如:border-style:solid與 border-style:solid solid solid solid的效果完全一樣;如果僅給出兩個(gè)或三個(gè)值,那么缺失邊的屬性值將取與對(duì)邊相同 的值。如:boder-width:thin thick與border-width:thin thick thin thick效果相同, border-width:1px 2px 3px與border-width:1px 2px 3px 2px的效果相同。
Border屬性的靈活應(yīng)用,可以產(chǎn)生許多特殊效果,方法與上面介紹的相同


將文章分享到:

版權(quán)所有:啟邁科技-合肥網(wǎng)站建設(shè) 皖I(lǐng)CP備19009304號(hào)-1 皖公網(wǎng)安備 34010402702162號(hào)

網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì)公司啟邁科技,為眾多企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站制作,響應(yīng)式網(wǎng)站設(shè)計(jì),手機(jī)網(wǎng)站建設(shè),微網(wǎng)站,模板建站,企業(yè)郵箱等一站式互聯(lián)網(wǎng)解決方案和建站服務(wù)10年。