Css之border屬性

設置border屬性作用:設置對象邊框樣式,設置單獨上邊框、下邊框、左邊框、右邊框樣式,實現美化美觀。邊框起到分割、規劃佈局作用。

1、四個邊框

border-left 設置左邊框,一般單獨設置左邊框樣式使用
border-right 設置右邊框,一般單獨設置右邊框樣式使用
border-top 設置上邊框,一般單獨設置上邊框樣式使用
border-bottom 設置下邊框,一般單獨設置下邊框樣式使用,有時可將下邊框樣式作爲css下劃線效果應用。

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


3、邊框三個樣式
通常我們可以對邊框設置寬度(厚度)、邊框樣式、邊框顏色這三個屬性與參數。

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


四、以縮寫方式寫上、下、左、右邊框單獨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


、三邊有邊而一邊沒有設置技巧

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

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章