div邊框的定義方法

div邊框的正肯定義方式以下：

border:1px solid #3399FF;

要指定邊框的寬度、樣式和顏色值，邊框才能顯示出來。只指定邊框的寬度，邊框是不會顯示出來的。若是將這三個值分開定義，邊框不必定能顯示出來，顯示出來也不必定是所指望的。

 

CSS border邊框屬性教程(color style)

1、CSS 邊框基礎知識    -   TOP

CSS 邊框即CSS border是控制對象的邊框邊線寬度、顏色、虛線、實線等樣式CSS屬性。同時你們能夠進入DIVCSS5提供CSS手冊查看border手冊：http://www.divcss5.com/shouce/c_border.shtml DIV+CSS邊框border知識教程篇

2、Html原始邊框與DIV+CSS邊框對照    -   TOP

Html表格控制邊框： border="1" bordercolor="#000000" 說明：控制表格邊框寬度爲1px，css顏色爲黑色，默認爲實線樣式邊框。

3、border邊框語法    -   TOP

一、四個邊框 border-left 設置左邊框，通常單獨設置左邊框樣式使用 border-right 設置右邊框，通常單獨設置右邊框樣式使用 border-top 設置上邊框，通常單獨設置上邊框樣式使用 border-bottom 設置下邊框，通常單獨設置下邊框樣式使用,有時可將下邊框樣式做爲css下劃線效果應用。

二、四邊相同邊框border簡寫 #divcss5{border:1px solid #00F} 設置了divcss5對象盒子1px像素藍色實線邊框

三、邊框三個樣式 一般咱們能夠對邊框設置寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數。

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

2）、邊框厚度（寬度）：border-width:1px 使用數字+單位設置邊框厚度寬度，如1px(邊框厚度寬度爲1像素)，邊框必須爲正數字，大於0的數值。不然設置邊框border樣式無效。

3）、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凸邊

4）、邊框樣式截圖：

 

邊框border-style樣式效果圖

4、CSS單獨設置左邊框、右邊框、上邊框、下邊框    -   TOP

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

一、1px黑色虛線上邊框 border-top:1px dashed #000

二、1px黑色實線下邊框 border-bottom:1px solid #000

三、1px黑色虛線左邊框 border-left:1px dashed #000

四、1px黑色實線右邊框 border-right:1px solid #000

5、經常使用推薦邊框樣式    -   TOP

咱們一般使用主流瀏覽器兼容邊框樣式有：

一、實線邊框：solid Border:1px solid #000 設置對象1px（像素）寬厚的黑色實線邊框。

二、虛線邊框：dashed Border:1px dashed #000 設置對象1px（像素）寬厚的黑色虛線邊框。

6、css border邊框用處    -   TOP

設置對象邊框樣式，設置單獨上邊框、下邊框、左邊框、右邊框樣式，實現美化美觀。邊框起到分割、規劃佈局做用。

7、border邊框樣式優化簡寫圖文教程    -   TOP

 

CSS border邊框屬性語法結構分析圖（簡寫優化的邊框border）

8、css邊框應用案例代碼    -   TOP

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

CSS代碼： #divcss5{height:100px;width:200px;border:1px solid #F00}

HTML代碼對應片斷： <div id="divcss5">個人高度爲100px,寬度爲200px</div>

9、css border邊框案例截圖    -   TOP

 

邊框border樣式應用示範案例截圖

10、css邊框border總結    -   TOP

咱們使用DIV CSS設置邊框border樣式，通常咱們使用簡寫表達式進行設置對象邊框border樣式，這樣節約代碼簡化代碼做用。不管是單獨設置一個邊的邊框仍是四邊邊框，咱們都儘可能縮寫方式簡寫CSS邊框代碼，CSS 邊框優化簡寫，常見對對象設置CSS樣式使用屬性代碼：border:1px solid #000;。

11、三邊有邊而一邊沒有設置技巧    -   TOP

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

CSS 代碼： border:1px solid #000; border-top:none; 注意border:1px solid #000; 和border-top:none;先後順序不能調換。由於CSS讀取有從上到下、從左到右讀取原理，而先設置了整個邊框樣式，後再加上聲明頂部上邊邊框爲「none」沒有意思，即實現該實例要的樣式。從而無需分別設置下、左、右，從而節約必定代碼。

轉自 http://www.divcss5.com/rumen/r120.shtml