css的頁(yè)面邊框代碼

CSS 邊框即CSS border是控制對(duì)象的邊框邊線寬度、顏色、虛線、實(shí)線等樣式CSS屬性。同時(shí)大家可以進(jìn)入CSS手冊(cè)查看border手冊(cè)

DIV+CSS邊框border知識(shí)教程篇

Html原始邊框與DIV+CSS邊框?qū)φ?/p>

Html表格控制邊框：

border="1" bordercolor="#000000"

說(shuō)明：控制表格邊框?qū)挾葹?px，css顏色為黑色，默認(rèn)為實(shí)線樣式邊框。

border邊框語(yǔ)法

四個(gè)邊框

border-left 設(shè)置左邊框，一般單獨(dú)設(shè)置左邊框樣式使用

border-right 設(shè)置右邊框，一般單獨(dú)設(shè)置右邊框樣式使用

border-top 設(shè)置上邊框，一般單獨(dú)設(shè)置上邊框樣式使用

border-bottom 設(shè)置下邊框，一般單獨(dú)設(shè)置下邊框樣式使用,有時(shí)可將下邊框樣式作為css下劃線效果應(yīng)用。

四邊相同邊框border簡(jiǎn)寫(xiě)

#div{border:1px solid #00F}

設(shè)置了div對(duì)象盒子1px像素藍(lán)色實(shí)線邊框

3、邊框三個(gè)樣式

通常我們可以對(duì)邊框設(shè)置寬度（厚度）、邊框樣式、邊框顏色這三個(gè)屬性與參數(shù)。

1）、邊框顏色：border-color:#000

2）、邊框厚度（寬度）：border-width:1px

使用數(shù)字+單位設(shè)置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數(shù)字，大于0的數(shù)值。否則設(shè)置邊框border樣式無(wú)效。

3）、border邊框樣式：border-style:solid

邊框樣式值如下：

none : 　無(wú)邊框。與任何指定的border-width值無(wú)關(guān)

hidden : 　隱藏邊框。IE不支持

dotted : 　在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線（常用）

dashed : 　在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線（常用）

solid : 　實(shí)線邊框（常用）

double : 　雙線邊框。兩條單線與其間隔的和等于指定的border-width值

groove : 　根據(jù)border-color的值畫(huà)3D凹槽

ridge : 　根據(jù)border-color的值畫(huà)菱形邊框

inset : 　根據(jù)border-color的值畫(huà)3D凹邊

outset : 　根據(jù)border-color的值畫(huà)3D凸邊

CSS單獨(dú)設(shè)置左邊框、右邊框、上邊框、下邊框

以縮寫(xiě)方式寫(xiě)上、下、左、右邊框單獨(dú)CSS樣式設(shè)置方法

1、1px黑色虛線上邊框

border-top:1px dashed #000

2、1px黑色實(shí)線下邊框

border-bottom:1px solid #000

3、1px黑色虛線左邊框

border-left:1px dashed #000

4、1px黑色實(shí)線右邊框

border-right:1px solid #000

常用推薦邊框樣式

我們通常使用主流瀏覽器兼容邊框樣式有：

實(shí)線邊框：solid

Border:1px solid #000 設(shè)置對(duì)象1px（像素）寬厚的黑色實(shí)線邊框。

虛線邊框：dashed

Border:1px dashed #000 設(shè)置對(duì)象1px（像素）寬厚的黑色虛線邊框。

css border邊框用處

設(shè)置對(duì)象邊框樣式，設(shè)置單獨(dú)上邊框、下邊框、左邊框、右邊框樣式，實(shí)現(xiàn)美化美觀。邊框起到分割、規(guī)劃布局作用。

border邊框樣式優(yōu)化簡(jiǎn)寫(xiě)圖文教程

css邊框應(yīng)用案例代碼

描述：為了觀察案例效果我們?cè)O(shè)置一個(gè)css寬度為200px，css高度1px,紅色實(shí)線邊框的DIV盒子

CSS代碼：

#divcss5{height:100px;width:200px;border:1px solid #F00}

HTML代碼對(duì)應(yīng)片段：

<div id="divcss5">我的高度為100px,寬度為200px</div>

我們使用DIV CSS設(shè)置邊框border樣式，一般我們使用簡(jiǎn)寫(xiě)表達(dá)式進(jìn)行設(shè)置對(duì)象邊框border樣式，這樣節(jié)約代碼簡(jiǎn)化代碼作用。無(wú)論是單獨(dú)設(shè)置一個(gè)邊的邊框還是四邊邊框，我們都盡量縮寫(xiě)方式簡(jiǎn)寫(xiě)CSS邊框代碼，CSS 邊框優(yōu)化簡(jiǎn)寫(xiě)，常見(jiàn)對(duì)對(duì)象設(shè)置CSS樣式使用屬性代碼：border:1px solid #000;。

如左右下有邊框并且樣式為黑色1PX寬度實(shí)線邊框，而上邊沒(méi)有邊框。

CSS 代碼： border:1px solid #000; border-top:none;

注意border:1px solid #000; 和border-top:none;前后順序不能調(diào)換。因?yàn)镃SS讀取有從上到下、從左到右讀取原理，而先設(shè)置了整個(gè)邊框樣式，后再加上聲明頂部上邊邊框?yàn)椤皀one”沒(méi)有意思，即實(shí)現(xiàn)該實(shí)例要的樣式。從而無(wú)需分別設(shè)置下、左、右，從而節(jié)約一定代碼。

相關(guān)閱讀：

css實(shí)現(xiàn)單行文本兩端對(duì)齊的示例

CSS中溢出隱藏（overflow）的實(shí)例詳解

html里的超鏈接標(biāo)簽

以上就是css的網(wǎng)頁(yè)邊框代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！