首頁 > 文章 > web前端 > css中的border邊框屬性使用總結

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

伊谢尔伦原創: 2017-06-06 14:00:563917瀏覽

初學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屬性

#擴展知識許多設計師一直使用的是目前為止在本章列出的知識，然而，有一些方法我們可以進一步擴展！

多個邊當給一個元素應用多個邊的時候，有各種不同的技巧可以參考。