元素的邊框(border)是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線.
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站設計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的景東網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
css border屬性允許你規(guī)定元素邊框的樣式，寬度和顏色.
css邊框:在html中，我們使用表格來創(chuàng)建文本周圍的邊框，但是 通過使用css邊框?qū)傩裕?/p>
我們可以創(chuàng)建出效果出色的邊框，并且可以應用于任何元素,
元素外邊距內(nèi)就是元素的邊框(border),元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線.每個邊框有3個方面:寬度、樣式/以及顏色。
指定的table為細邊框，把table放在div中即可。
一、首先新建表格，代碼如下：
table width="500" border="1"? trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr? tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。
二、在table里加css樣式，代碼如下：
table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"? tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。
三、單元格邊距(表格填充)(cellpadding) -- 代表單元格外面的一個距離,用于隔開單元格與單元格空間。單元格間距(表格間距)(cellspacing) -- 代表表格邊框與單元格補白的距離,也是單元格補白之間的距離，border-collapse:collapse表示表格的兩邊框合并為一條即可。
border屬性 ：在網(wǎng)頁中設置元素的邊框樣式。可同時設置邊框?qū)挾?、邊框樣式、邊框顏色。也可以單獨設置上邊、右邊、下邊、左邊的邊框。
語法：border： border-width | border-style | border-color;
border-width ：邊框?qū)挾取？梢灾付ㄩL度值。如1px，1em（單位為px，pt，em等）。或者使用關鍵字medium（默認），thick，thin。
?border-top-width：設置元素上邊框?qū)挾?/p>
?border-right-width：設置元素右邊框?qū)挾?/p>
?border-bottom-width：設置元素下邊框?qū)挾?/p>
?border-left-width：設置元素左邊框?qū)挾?/p>
border-style ：邊框樣式。
?border-top-style：設置元素上邊框樣式
?border-right-style：設置元素右邊框樣式
?border-bottom-style：設置元素下邊框樣式
?border-left-style：設置元素左邊框樣式
?屬性值有：
??none：無邊框。
??hidden：隱藏邊框。對于表，hidden 用于解決邊框沖突。
??dotted：點狀邊框。
??dashed：虛線邊框。
??solid：實線邊框。
??double：雙線邊框。兩條單線與其間隔的和等于指定的border-width值。
??groove：3D凹槽邊框。
??ridge：3D壟狀邊框。
??inset：凹邊框。
??outset：凸邊框。
border-color ：邊框顏色。
1.1 邊框各樣式效果圖
1.2 四條邊顏色樣式相同
1.3 四條邊顏色不同，樣式相同
1.4 四條邊顏色相同，樣式不同
1.5 設置上邊框?qū)挾?、樣式、顏?/p>
1.6 設置右邊框?qū)挾?、樣式、顏?/p>
1.7 設置下邊框?qū)挾?、樣式、顏?/p>
1.8 設置左邊框?qū)挾?、樣式、顏?/p>
以上對border邊框?qū)傩赃M行了基礎操作，大家可以根據(jù)自己的經(jīng)驗為邊框制作出更漂亮的樣式。如若大家有什么更好的見解，那就在回復區(qū)暢所欲言吧，我定會吸取精華~如有寫錯歡迎大家回復，我以后定會更加細心 _
CSS設置div邊框顏色寬度和高度步驟如下：
1、新建一個html文件，創(chuàng)建一個類名為wrap的div。
2、先通過css類選擇器選擇到div來控制div的寬度和高度和背景顏色（沒有邊框時方便看出來div的大?。?。
3、通過div 的border屬性控制邊框顏色，設置border的寬度為2px，線型為實線，顏色為藍色。
4、這樣就可以設置div邊框顏色寬度和高度，如下圖：
擴展資料：
css border屬性：
border 簡寫屬性在一個聲明設置所有的邊框?qū)傩浴?/p>
可以按順序設置如下屬性：
border-width，border-style，border-color
如果不設置其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。
一、只對表格table標簽設置邊框 ? - ?TOP
只對table標簽設置border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內(nèi)部不產(chǎn)生邊框樣式。
案例詳細如下：
1、對應css代碼
style.table-a?table{border:1px?solid?#F00}?/*?css注釋：只對table標簽設置紅色邊框樣式?*/?style
2、對應html代碼片段
divclass="table-a"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學習tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtablediv
二、對td設置邊框 ? - ??TOP
對table表格td設置邊框樣式，表格對象內(nèi)td將實現(xiàn)邊框樣式，但中間部分td會導致出現(xiàn)雙邊框。
詳細案例教程如下：
1、對應css代碼
style.table-b?table?td{border:1px?solid?#F00}?/*?css注釋：只對table?td標簽設置紅色邊框樣式?*/?style
2、對應html源代碼片段
divclass="table-b"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學習tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtable
三、對table和td技巧性設置表格邊框 ? - ??TOP
如上第二點，只對表格對象td設置單一邊框樣式，中間部分td與td標簽之間就會出現(xiàn)雙邊框現(xiàn)象。
解決方法：對td只設置兩個邊的邊框，對table也設置兩個邊的邊框樣式。
解釋：對td設置左與上邊框，這樣td與td相鄰就會只出現(xiàn)單一邊框樣式，這樣就會出現(xiàn)表格右側(cè)和下部沒有邊框，這個時候我們設置table右和下 邊框解決顯示右側(cè)和下側(cè)td剩下未顯示邊框。
1、對應css代碼：
style.table-c?table{border-right:1px?solid?#F00;border-bottom:1px?solid?#F00}?.table-c?table?td{border-left:1px?solid?#F00;border-top:1px?solid?#F00}?/*?css 注釋：?只對table?td設置左與上邊框；?對table設置右與下邊框；?為了便于截圖，我們將css?注釋說明換行排版?*/?style
2、對應html源代碼片段：
divclass="table-c"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學習tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtable
四、對table和td設置背景，實現(xiàn)完美表格邊框 ? - ??TOP
1、基礎設置
1）、先設置table?css背景為紅色
2）、設置table單元之間間距為1
使用DW軟件輔助設置table表格單元間距為1，具體DW軟件可視化操作步驟簡要說明，首先（視圖模式）選中表格后，對應DW軟件編輯窗口底部會“屬性”面板會出現(xiàn)對應table表格屬性設置地方，我們將“間隔”填寫為“1”。這個時候我們會看到table表格標簽里cellspacing值為“1”（cellspacing="1"）。
借助DW軟件設置表格單元之間間距
或
直接對
標簽內(nèi)cellspacing="1"即可，得到：
tablewidth="400"border="0"cellspacing="1"cellpadding="0"
3）、設置table td背景為白色
2、css代碼：
style.table-d?table{?background:#F00}?.table-d?table?td{?background:#FFF}?/*?css注釋：設置table背景為紅色，td背景為白色?*/?style
3、對應html源代碼：
divclass="table-d"tablewidth="400"border="0"cellspacing="1"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"網(wǎng)址tdtdwidth="112"說明tdtrtrtdDIVCSS5tdtd;tdCSS學習tdtrtrtdCSS5tdtd;tdCSS切圖tdtrtablediv
五、css table表格邊框?qū)崿F(xiàn)總結(jié) ? - ?TOP
以上四種方式實現(xiàn)table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結(jié)html table邊框布局方法對大家有幫助并能掌握，平時需要時靈活運用。
在css中，主要通過border屬性的設置，實現(xiàn)去掉邊框。以代碼編輯器：zend studio 10.0為例，可參考以下步驟去掉button（按鈕）的邊框：
1、新建一個html文件，命名為test.html，用于講解。
2、在test.html文件內(nèi)，使用button標簽創(chuàng)建一個按鈕，用于測試。
3、在test.html文件內(nèi)，給button按鈕添加一個id屬性，用于樣式的設置。
4、在test.html文件內(nèi)，編寫style type="text/css"/style標簽，頁面的css樣式將寫在該標簽內(nèi)。
5、在css標簽中，通過id設置button的樣式，定義其背景顏色為藍色，文字顏色為白色，最后，將border屬性設置為none，實現(xiàn)去掉button的邊框。
6、在瀏覽器打開test.html文件，查看實現(xiàn)的效果。
重慶分公司
重慶分公司
