在網(wǎng)頁設計中經(jīng)常用到css來設計各種邊框樣式以及顏色等，有時候需要一個p只顯示一個邊框，那么你可能會用到下面的一些方法。
創(chuàng)新互聯(lián)公司網(wǎng)站設計，為客戶量身定制各類網(wǎng)站建設業(yè)務，包括企業(yè)型、電子商務型、成都響應式網(wǎng)站建設公司、行業(yè)門戶型等各類網(wǎng)站，實戰(zhàn)經(jīng)驗豐富，成功案例眾多。以客戶利益為出發(fā)點，創(chuàng)新互聯(lián)公司網(wǎng)站制作為客戶規(guī)劃、按需網(wǎng)站開發(fā)符合企業(yè)需求、帶有營銷價值的網(wǎng)絡建站方案認真對待每一個客戶，我們不用口頭的語言來吹擂我們的優(yōu)秀，千余家的成功案例見證著我們的成長。
一、CSS border-width 屬性
border-width是實現(xiàn)顯示邊框的重要屬性。用法如下：
border-width:top right bottom left
參數(shù)說明：
top：上邊框?qū)傩?，可以設置像素，也可以設置樣式，意思為上邊框的寬度。
right：右邊框?qū)傩裕梢栽O置像素，也可以設置樣式，意思為上邊框的寬度。
bottom：下邊框?qū)傩裕梢栽O置像素，也可以設置樣式，意思為上邊框的寬度。
left：左邊框?qū)傩裕梢栽O置像素，也可以設置樣式，意思為上邊框的寬度。
其中像素如：10px 20px等
內(nèi)置樣式有：
thin：定義細的邊框；
medium:默認值，定義中等邊框；
thick：定義粗的邊框；
inherit：繼承父元素的邊框?qū)挾取?/p>
二、CSS border-style 屬性
border-style是用來設置邊框線樣式的，語法如下：
border-style:樣式;
其中可設置的樣式有：
none 定義無邊框。
hidden 與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。
dotted 定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
dashed 定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
solid 定義實線。
double 定義雙線。雙線的寬度等于 border-width 的值。
groove 定義 3D 凹槽邊框。其效果取決于 border-color 的值。
ridge 定義 3D 壟狀邊框。其效果取決于 border-color 的值。
inset 定義 3D inset 邊框。其效果取決于 border-color 的值。
outset 定義 3D outset 邊框。其效果取決于 border-color 的值。
inherit 規(guī)定應該從父元素繼承邊框樣式。
三、實例應用
只要定義邊框不為0，即可顯示邊框（但是需要定義邊框線樣式），如果想要只顯示下邊框就相當于把top、right、left設置為0px；下邊框不為0即可。
實例如下：
只顯示下邊框
顯示如下：
如果想要只顯示右邊框只需要改border-width屬性為 0 1px 0 0即可。
[img]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; 也是允許的。
顧名思義，就是元素外面的一圈邊框，下圖中虛線圈起的部分是內(nèi)容，外面橙色的一圈是它的邊框，可以理解成在照片外面加一個相框，使用border屬性。
邊框樣式border-style必須寫！否則其它屬性全部失效。
邊框的樣式：
border后面可跟多個值，中間用空格分離，含義如下：
注意順序， 邊框樣式不可省略 ，顏色和寬度可以省略，會顯示默認的效果。
——以上規(guī)律在padding和margin一樣適用。
邊框樣式border-style必須設置
如果我們的四條邊框?qū)傩远际且粯拥?，那么統(tǒng)一設置就可以啦，注意邊框類型不可省略。
首先我們放置一個寬高為200px的粉色盒子。
接下來我們?yōu)樗由弦粭l寬度為10px，樣式為實線，顏色為紅色的邊框。
我們可以看到，添加邊框的時候，是在盒子外面套一圈邊框，而不是加在里面，在Chrome瀏覽器中點擊右鍵檢查，可以看到div的大小變成了220x220。
套在外面的邊框的寬度是會加進盒子尺寸的（上下左右各增加了10px），如果我們想盒子保持大小不變，要對div本身的width和height進行減小，在這個樣例中，通過計算可得，減少到180px即可保持大小不變。
當我們使用點狀、虛線等邊框樣式時，多出來的縫隙，會使用元素本身的 背景顏色 填充。
點和虛線的具體樣式，不同瀏覽器中可能會不一樣。
我們?yōu)閯倓偟暮凶釉O置上邊框為紅色，左邊框為綠色，效果如下圖所示：
我們會發(fā)現(xiàn)在兩條邊框交界處的小方塊，通過一條對角線分隔，上邊框和左邊框各占一半。當邊框不一樣寬時，同樣也是用對角線把交界處的小長方形一分為二，如下圖所示：
當被添加邊框的元素寬度為0，不設置高度（高度默認是0）的情況下，我們可以巧妙利用 邊框組合 和 transparent（透明） 繪制三角形，可以體驗下哦。
三角形1-css：
三角形2-css：
多彩三角形-css：
繪制梯形只要對應添加寬度或者高度就可以啦
梯形1-css：
梯形2-css：
一、只對表格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)表格右側和下部沒有邊框，這個時候我們設置table右和下 邊框解決顯示右側和下側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)總結 ? - ?TOP
以上四種方式實現(xiàn)table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結html table邊框布局方法對大家有幫助并能掌握，平時需要時靈活運用。
重慶分公司
重慶分公司
