初學css的朋友可能覺得 border 屬性只是簡單的繪製邊框。其實， border是控制物件的邊框邊線寬度、顏色、虛線、實線等樣式。可以對單一邊框進行控制，也可以控制所有的邊框。使用border屬性可以製作更多的效果。在CSS 中，你可以透過border 的語法來對邊框做許多樣化的設計變化，例如設定邊框的寬度、樣式、顏色等等，也可以隱藏邊框，原則上CSS 對於border 的設計不只限於p 區塊或span 的邊框，也可以應用到其他的網頁元素的邊框上，例如網頁標題的邊框、圖片的邊框（img border）... 等，所有的主流瀏覽器都支援CSS border 屬性。下面就來具體的說明下border邊框屬性的使用。
首先學習php中文網相關的免費課程
#1. 學習《html/css快速入門》中的css邊框樣式 課程
#2. 觀看《極客學院CSS及CSS3影片教學》的 CSS盒子模型-邊框 影片教學
border邊框屬性
1）border-width：不支援百分比，支援關鍵字，thin（1px），medium（預設值，3px，預設值是3px的原因是只有當border是3px以上時，border-style才有效果實），thick（5px）
#2）border-style :有不同值，以下分析分別為不同值時的應用 a.solid：可以實現三角，梯形；b.dashed:虛線，在chrome/Firefox瀏覽器中，虛線和實線的比例是3:1（稀），在IE瀏覽器中，比例是2：1（密）；c.dotted:點線，在chrome/Firefox瀏覽器中，是方點，在IE瀏覽器中，是圓點（可以利用圓點實現圓角效果）；d.double:雙線,計算規則，雙線寬度永遠相等，中間間隔+-1，例如，3px=1（內）+1（中間間隔）+1（外），可以實現三道槓圖形；e.inset（內凹）,outset（外凸）,ridge（溝槽):風格過時，相容性差，沒有什麼使用場景
border-width屬性設定邊框的寬度 可能的值：像素
border-style 屬性設定邊框的樣式 可能的值：solid(直線)，dashed(虛線)，dotted(點線)
border-color 屬性設定邊框的顏色 可能的值：red,#f00,#ff0000,rgb(255,0,0),transparent
border-left 屬性設定左邊框
border-right 屬性設定右邊框
border-top 屬性設定上邊框
border-bottom 屬性設定下邊框
#3. 你所不知道的border用法
思路：當底邊和水平線平行時，我們直接透過控制寬高比來實現我們想要的三角形效果；當與水平線不重合時這時候就比較複雜了，就需要用到寬高比和CSS3中的transform屬性和rotate相結合，讓我們的三角形呈現出我們想要的效果（這裡只是介紹思路，不去具體實現，其中有涉及到數學方面的知識可以是自己百度）。
border 顧名思義就是邊框的意思，在CSS 中，你可以透過border 的語法來對邊框做許多樣化的設計變化，例如設定邊框的寬度、樣式、顏色等等，也可以隱藏邊框，原則上CSS 對於border 的設計不限於p 區塊或span 的邊框，也可以應用到其他的網頁元素的邊框上，例如網頁標題的邊框、圖片的邊框（img border）... 等，所有的主流瀏覽器都支援CSS border 屬性。
邊框可以根據方向單獨設置，上下左右，border-top | border-bottom | border-left | border-right ;
所以屬性也可以單獨設置，border-top-width | border-top-style | border-top-color ;
單屬性也可以有組合寫法：
border-width:上右下左；（順時針方向）
border-width:上左右下；
border-width:上下左右；
border-width:四個方向；
border-style | border-color也可以這樣設定；
6. CSS：Border屬性
#擴展知識 許多設計師一直使用的是目前為止在本章列出的知識，然而，有一些方法我們可以進一步擴展！
多個邊 當給一個元素應用多個邊的時候，有各種不同的技巧可以參考。
邊的樣式 solid，dashed和dotted是最常用的border-style屬性值，還有其他幾個我們可以使用的值，包括groove和ridge。
相關問答
#3. 關於border-image
【相關推薦】
#1. php中文網免費影片教學：《php.cn獨孤九賤（2 ）－css影片教學》
2. php中文網免費影片教學：CSS影片教學
#以上是css中的border邊框屬性使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
