如何在css中使用border屬性

今天就跟大家聊聊有關(guān)如何在css中使用border屬性，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

一、CSS邊框基礎(chǔ)知識

CSS 邊框即CSS border是控制對象的邊框邊線寬度、顏色、虛線、實線等樣式CSS屬性。同時大家可以進入碼農(nóng)教程提供CSS手冊查看border。

二、Html原始邊框與CSS邊框?qū)φ?/span>

Html表格控制邊框：

CSS Code復制內(nèi)容到剪貼板

1. border="1" bordercolor="#000000"    

說明：控制表格邊框?qū)挾葹?px，css顏色為黑色，默認為實線樣式邊框。

三、border邊框語法

1、四個邊框

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

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

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

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

2、四邊相同邊框border簡寫

CSS Code復制內(nèi)容到剪貼板

1. #manong{border:1px solid #00F}    

設(shè)置了manong對象盒子1px像素藍色實線邊框

3、邊框三個樣式

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

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

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

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

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

邊框樣式值如下：

none : 　無邊框。與任何指定的border-width值無關(guān)
hidden : 　隱藏邊框。IE不支持
dotted : 　在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）
dashed : 　在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）
solid : 　實線邊框（常用）
double : 　雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 　根據(jù)border-color的值畫3D凹槽
ridge : 　根據(jù)border-color的值畫菱形邊框
inset : 　根據(jù)border-color的值畫3D凹邊
outset : 　根據(jù)border-color的值畫3D凸邊

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

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

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

五、常用推薦邊框樣式

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

1、實線邊框：solid

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

2、虛線邊框：dashed

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

六、css border邊框用處

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

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

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

CSS代碼：

CSS Code復制內(nèi)容到剪貼板

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

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

CSS Code復制內(nèi)容到剪貼板

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

八、css邊框border總結(jié)

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

九、css邊框border設(shè)置技巧

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

CSS 代碼：

CSS Code復制內(nèi)容到剪貼板

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

看完上述內(nèi)容，你們對如何在css中使用border屬性有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。