css border屬性的使用方法和技巧
我要評論CSS border用于設(shè)置HTML元素（如div）的邊框，包括邊框的寬度、顏色和樣式。本文章向碼農(nóng)介紹CSS border邊框?qū)傩栽敿?xì)內(nèi)容，感興趣的碼農(nóng)可以參考一下。
CSS 邊框即CSS border-border邊框樣式顏色、邊框樣式、邊框?qū)挾鹊恼Z法結(jié)構(gòu)與應(yīng)用案例教程篇
一、CSS邊框基礎(chǔ)知識
CSS 邊框即CSS border是控制對象的邊框邊線寬度、顏色、虛線、實(shí)線等樣式CSS屬性。同時大家可以進(jìn)入碼農(nóng)教程提供CSS手冊查看border。
二、Html原始邊框與CSS邊框?qū)φ?/font>
Html表格控制邊框：
- border="1" bordercolor="#000000"
說明：控制表格邊框?qū)挾葹?px，css顏色為黑色，默認(rèn)為實(shí)線樣式邊框。
三、border邊框語法
1、四個邊框
border-left 設(shè)置左邊框，一般單獨(dú)設(shè)置左邊框樣式使用
border-right 設(shè)置右邊框，一般單獨(dú)設(shè)置右邊框樣式使用
border-top 設(shè)置上邊框，一般單獨(dú)設(shè)置上邊框樣式使用
border-bottom 設(shè)置下邊框，一般單獨(dú)設(shè)置下邊框樣式使用,有時可將下邊框樣式作為css下劃線效果應(yīng)用。
2、四邊相同邊框border簡寫
- #manong{border:1px solid #00F}
設(shè)置了manong對象盒子1px像素藍(lán)色實(shí)線邊框
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+為點(diǎn)線。否則為實(shí)線（常用）
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實(shí)線（常用）
solid : 實(shí)線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 根據(jù)border-color的值畫3D凹槽
ridge : 根據(jù)border-color的值畫菱形邊框
inset : 根據(jù)border-color的值畫3D凹邊
outset : 根據(jù)border-color的值畫3D凸邊
四、CSS單獨(dú)設(shè)置左邊框、右邊框、上邊框、下邊框
以縮寫方式寫上、下、左、右邊框單獨(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
五、常用推薦邊框樣式
我們通常使用主流瀏覽器兼容邊框樣式有：
1、實(shí)線邊框：solid
Border:1px solid #000 設(shè)置對象1px（像素）寬厚的黑色實(shí)線邊框。
2、虛線邊框：dashed
Border:1px dashed #000 設(shè)置對象1px（像素）寬厚的黑色虛線邊框。
六、css border邊框用處
設(shè)置對象邊框樣式，設(shè)置單獨(dú)上邊框、下邊框、左邊框、右邊框樣式，實(shí)現(xiàn)美化美觀。邊框起到分割、規(guī)劃布局作用。
七、css邊框應(yīng)用案例代碼
描述：為了觀察案例效果我們設(shè)置一個css寬度為200px，css高度1px,紅色實(shí)線邊框的DIV盒子
CSS代碼：
- #manong{height:100px;width:200px;border:1px solid #F00}
HTML代碼對應(yīng)片段：
- <div id="manong">我的高度為100px,寬度為200px</div>
八、css邊框border總結(jié)
我們使用CSS設(shè)置邊框border樣式，一般我們使用簡寫表達(dá)式進(jìn)行設(shè)置對象邊框border樣式，這樣節(jié)約代碼簡化代碼作用。無論是單獨(dú)設(shè)置一個邊的邊框還是四邊邊框，我們都盡量縮寫方式簡寫CSS邊框代碼，CSS 邊框優(yōu)化簡寫，常見對對象設(shè)置CSS樣式使用屬性代碼：border:1px solid #000;。
九、css邊框border設(shè)置技巧
如左右下有邊框并且樣式為黑色1PX寬度實(shí)線邊框，而上邊沒有邊框。
CSS 代碼：
- border:1px solid #000; border-top:none;
注意border:1px solid #000; 和border-top:none;前后順序不能調(diào)換。因?yàn)镃SS讀取有從上到下、從左到右讀取原理，而先設(shè)置了整個邊框樣式，后再加上聲明頂部上邊邊框?yàn)?ldquo;none”沒有意思，即實(shí)現(xiàn)該實(shí)例要的樣式。從而無需分別設(shè)置下、左、右，從而節(jié)約一定代碼。
以上這篇css border屬性的使用方法和技巧就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/myhomepages/p/5502319.html
相關(guān)文章
CSS3中設(shè)置3D變形的transform-style屬性詳解
transform-style經(jīng)常被用來做三維空間坐標(biāo)系中的圖形變換,下面我們就來看看CSS3中設(shè)置3D變形的transform-style屬性詳解,需要的朋友可以參考下2016-05-23- 下面小編就為大家?guī)硪黄猚ss 元素選擇器的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-23
- 下面小編就為大家?guī)硪黄猚ss sprite簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-23
CSS3中的Transition過度與Animation動畫屬性使用要點(diǎn)
這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點(diǎn)Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當(dāng)然進(jìn)一步的控制還是需要JavaScript的2016-05-20- :before和:after偽元素在CSS中除了被用來添加元素、加小標(biāo)、清浮動等,還有很多妙用之處,接下來我們就來看一兩個CSS中:before和:after偽元素使用的奇技淫巧2016-05-20
- 氣泡式對話框在Web頁面上如今也十分普及和常見,對話框中三角形的朝向關(guān)鍵在于before偽元素的定位,接下來我們就來看一下使用CSS繪制基礎(chǔ)的對話框圖案的代碼示例2016-05-20
CSS凹型導(dǎo)航按鈕效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狢SS凹型導(dǎo)航按鈕效果的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。祝大家游戲愉快哦2016-05-20
magic.css是一套帶64種動畫效果的CSS3動畫庫。全部使用CSS3 animation動畫來完成2016-05-19CSS文本超出指定寬度后隱藏并顯示為省略號的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS文本超出指定寬度后隱藏并顯示為省略號的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-24
