CSS border邊框怎麼用

CSS邊框的border屬性怎麼使用，border有哪些屬性，怎麼控制物件的邊框邊線寬度、顏色、虛線、實線等樣式，我們就在這篇文章裡給大家詳細介紹一番

CSS 邊框即CSS border-border邊框樣式顏色、邊框樣式、邊框寬度的語法結構與應用案例教程篇

CSS 邊框基礎知識

CSS 邊框即CSS border是控制對象的邊框邊線寬度、顏色、虛線、實線等樣式CSS屬性

Html表格控制邊框：

border="1" bordercolor="#000000"

說明：控製表格邊框寬度為1px，css顏色為黑色，預設為實線樣式邊框。

四個邊框

border-left 設定左邊框，一般單獨設定左邊框樣式使用

border-right 設定右邊框，一般單獨設定右邊框樣式使用

border-top 設定上邊框，一般單獨設定上邊框樣式使用

border-bottom 設定下邊框，一般單獨設定下邊框樣式使用,有時可將下邊框樣式作為css底線效果套用。

四邊相同邊框border簡寫

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

設定了div5物件盒子1px像素藍色實線邊框

邊框三個樣式

通常我們可以對邊框設定寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數。

邊框顏色：border-color:#000

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

#使用數字+單位設定邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數字，大於0的數值。否則設定邊框border樣式無效。

border邊框樣式：border-style:solid

邊框樣式值如下：

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凸邊

CSS單獨設定左邊框、右邊框、上邊框、下邊框

以縮寫方式寫上、下、左、右邊框單獨CSS樣式設定方法

1、1px黑色虛線上邊框

border-top:1px dashed #000

2、 1px黑色實線下邊框

border-bottom:1px solid #000

3、1px黑色虛線左邊框

border-left:1px dashed #000

4、1px黑色實線右邊框

border-right:1px solid #000

常用推薦邊框樣式

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

實線邊框：solid

Border:1px solid #000 設定物件1px（像素）寬厚的黑色實線邊框。

虛線邊框：dashed

Border:1px dashed #000 設定物件1px（像素）寬厚的黑色虛線邊框。

css border邊框用處

設定物件邊框樣式，設定單獨上邊框、下邊框、左邊框、右邊框樣式，實現美化美觀。邊框起到分割、規劃佈局作用。

border邊框樣式最佳化簡寫圖文教學

css邊框應用案例程式碼

描述：為了觀察案例效果我們設定一個css寬度為200px，css高度1px,紅色實線邊框的DIV盒子

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

HTML程式碼對應片段：

<div id="div">我的高度为100px,宽度为200px</div>

css邊框border總結 

我們使用DIV CSS設定邊框border樣式，一般我們使用簡寫表達式進行設定物件邊框border樣式，這樣節約程式碼簡化程式碼作用。無論是單獨設定一個邊的邊框或四邊邊框，我們都盡量縮寫方式簡寫CSS邊框程式碼，CSS 邊框最佳化簡寫，常見對物件設定CSS樣式使用屬性碼：border:1px solid #000;。

十一、三邊有邊而一邊沒有設定技巧

如左右下有邊框並且樣式為黑色1PX寬度實線邊框，而上邊沒有邊框。

CSS 程式碼：

border:1px solid #000; border-top:none;

注意border:1px solid #000; 和border-top:none;前後順序不能調換。因為CSS讀取有從上到下、從左到右讀取原理，而先設定了整個邊框樣式，後再加上聲明頂部上邊邊框為“none”沒有意思，即實現該實例要的樣式。從而無需分別設定下、左、右，從而節省一定程式碼。

CSS的border邊框使用方法就這麼多，需要的朋友可以保存一下，也請大家持續關注本站的其他更新。

相關閱讀：

CSS怎麼加粗文字

#CSS的margin屬性怎麼設定

DIV+CSS怎麼使用

#

以上是CSS border邊框怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！