Border（畫邊框），它是CSS的一個屬性，用它可以給能確定範圍的HTML標記（如TD、DIV等等）畫邊框，可以給文本加邊框，給導覽功能表加分隔線，下面與大家分享個執行個體，感興趣的朋友可以瞭解下.
製作過網頁的人都有為畫線而煩惱的經曆，先來認識一下“Border”（畫邊框），它是CSS的一個屬性，用它可以給能確定範圍的HTML標記（如TD、DIV等等）畫邊框，它可以定義邊框線的類型、寬度和顏色，利用這個特性，可以製作一些特殊效果。下面把通過執行個體來說明其應用技巧。
1、給文本加邊框
上面的樣本中，給一段文字加了不同的邊框，只是為了說明邊框線的顏色、粗細是可變的。
第一個邊框的CSS代碼是：style="border:thin solid red"；
“border”後面的三個參數的含義是：邊框線的寬度是：thin（細線）；邊框線的類型：solid（實線）；邊框線的顏色：red（紅色）。
邊框線的寬度有三個標準值：thin（細線）、medium（中粗線）和thick（粗線），
此外，也可以自訂寬度，如：1pt、5px、2cm等。
邊框線的類型有九個確定值：none（無邊框線）、 dotted（由點組成的虛線）、 dashed（由短線組成的虛線）、 solid（實線）、 double（雙線，雙線寬度加上它們之間的空白部分的寬度就等於border-width定義的寬度）、 groove（3D溝槽狀的邊框）、 ridge（3D脊狀的邊框）、 inset（3D內嵌邊框，顏色較深）、 outset（3D外嵌邊框，顏色較淺），
注意：如果系統不支援這些邊框的屬性值，那麼“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都會被“solid”代替。
邊框線的顏色：可以用十六進位的顏色代碼，如#00ffcc。
從上面可以看出，給文本加邊框確實很簡單，上例中後面那幾個邊框的設定，我不講你也明白了吧！在這裡告訴你一點小技巧，給一段文本加邊框，可把CSS加在〈P〉標記裡；給幾段文本加邊框，先把那幾段文本用DIV標記括起來，再把CSS加在〈DIV〉標記裡；若是要給一行文本加幾個不同的邊框，則需要把文本放在表格裡，再把CSS分別加到〈TD〉標記裡。
2、給導覽功能表加分隔線
上面這個例子中的小白線，當然可以用圖象來做，但我在這裡是用CSS的“border”的擴充屬性畫了邊框的一條邊，這樣代碼要少的多。畫邊框的單邊與上例的邊框的四條邊類似，一個邊框的四條邊的屬性如下：
邊框線名稱：border-top（上邊框線）、border-right（右邊框線）、border-bottom（下邊框線）和boder-left（左邊框線）；每條邊框線的類型、寬度和顏色的取值與“boder”屬性相同。如本例中要定義每個儲存格的左邊框線為白色線，線的寬度為“1px”的實線，則CSS代碼是這樣的：style="border-left: 1px solid #ffffff"。
在單獨定義邊框線時，若不給出某個值，那麼就取其預設的初始值。在dreamweaver中定義CSS非常方便，不用編寫代碼；把常用的邊框線一次定義好，放在外連式CSS檔案中，要用時調用一下就行了，非常方便。
3、在一個邊框中採用不同寬度和顏色的邊框線
在本例中的效果，當然可以用上例中的方法來實現，但那樣代碼過多，可採用另一種合并的方法，把四條邊的屬性值分類放在一起，如本例的代碼是這樣的：
style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。
從上面可以看出，我把邊框線的類型、寬度和顏色歸類在一起定義了，這裡請注意幾點：
一、四條邊框線的位置順序是：上邊框線、右邊框線、下邊框線、左邊框線；
二、我在本例中邊框線的類型只取了一種實線類型，實際上四條邊也可以分別定義不同的類型；
三、屬性值可以定義一個、兩個、三個或者四個。如果僅定義一個屬性值，則其餘三個自動取相同值，如：border-style:solid與border-style:solid solid solid solid的效果完全一樣；如果僅給出兩個或三個值，那麼缺失邊的屬性值把取與對邊相同的值。如：boder-width:thin thick與border-width:thin thick thin thick效果相同，border-width:1px 2px 3px與border-width:1px 2px 3px 2px的效果相同。
Border屬性的靈活應用，可以產生許多特殊效果，方法與上面介紹的相同。
例子：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>一列固定寬度——</title> <style type="text/css"> <!-- #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 300px; } --> </style> </head> <body> <p id="layout">hfhfg</p> </body> </html>
3. cs怎麼設定雙實線
雙實線：
<p style=border-style:double>雙線式邊框</p>如：.cc {border:4px #39F double;}
其它：
<p style=border-style:none>無邊框</p> <p style=border-style:dotted>點線式邊框</p> <p style=border-style:dashed>破折線式邊框</p> <p style=border-style:solid>直線式邊框</p> <p style=border-style:double>雙線式邊框</p> <p style=border-style:groove>槽線式邊框</p> <p style=border-style:ridge>脊線式邊框</p> <p style=border-style:inset>內嵌效果的邊框</p> <p style=border-style:outset>突起效果的邊框</p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
