css中的border邊框屬性使用總結

初學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. 關於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（溝槽）:風格過時，相容性差，沒有什麼使用情境

2. 詳解css樣式之border屬性

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相結合，讓我們的三角形呈現出我們想要的效果（這裡只是介紹思路，不去具體實現，其中有涉及到數學方面的知識可以自己百度）。

4. 使用CSS的border屬性構建變形邊框的方法總結

border 顧名思義就是邊框的意思，在 CSS 中，你可以透過 border 的文法來對邊框做許多樣化的設計變化，例如設定邊框的寬度、樣式、顏色等等，也可以隱藏邊框，原則上 CSS 對於 border 的設計不只局限於 p 區塊或 span 的邊框，也可以應用到其他的網頁元素的邊框上，例如網頁標題的邊框、圖片的邊框（img border）... 等，所有的主流瀏覽器都支援 CSS border 屬性。

5. 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。

相關問答

1. 關於CSS實現border的0.5px設定？

2. FireFox border樣式異常

3. 關於border-image

4. css3 怎麼實現border-image圓角的問題

【相關推薦】

1. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》

2. php中文網免費視頻教程：CSS視頻教程