<span id="nxois"><th id="nxois"></th></span>

CSS邊框屬性(border)的如何使用

2020-03-24 16:23:07

字體：大中小

來源：轉載

供稿：網友

我們知道在CSS中邊框的使用是非常重要的，我們這里就介紹一下CSS的邊框屬性( border)如何使用。邊框是圍繞在內容和內邊距之間的一條或多條線。內容的內邊距和外間距之間的間隙是留給邊框的，CSS可以用邊框屬性來定義它的樣式、顏色和寬度等。在Html中人們用表格來制作文本周圍的邊框，但通過CSS來設置邊框將有更出色的效果，而且可以應用于所有的元素。邊框分為上邊框、右邊框、下邊框、左邊框。每個邊框有3個方面：樣式（或外觀）、顏色、以及其寬度（粗細），下面我們分別重?點解釋這三項。
邊框樣式（border-style）設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。它有10個屬性值，分別是：none: 無樣式； hidden: 同樣是無樣式，主要用于解決和表格的邊框沖突； dotted: 點劃線； dashed: 虛線； solid: 實線； double: 雙線,兩條線加上中間的空白等于border-width的取值； groove: 槽狀； ridge: 脊狀,和groove相反； inset: 凹陷； outset:凸出,和inset相反；其中groove、ridge、inset、outset有些像3D效果，它的效果受border-color的影響。border-style作用在四個方向時所用的方法和前面曾講過的padding屬性的書寫方法相同，如果它書寫四個參數值，將按照上-右-下-左的順序定義邊框。如果只設置一個，將用于四個邊框統一設置。如果設置兩個值，第一個作用于上下，第二個則作用與左右。如果設置三個值，第一個作用于上邊框，第二個作用于左右邊框，第三個作用于下邊框。
邊框顏色（border-color）這個屬性用來定義所有邊框顏色，或者為四個邊分別設置顏色。它可以取顏色的值或被設置為透明（transparent）。示例：.colorful {border-style:solid;border-color:gray;}border-color屬性值的個數與其所對應方向的邊框效果的設置方法和border-style的設置方法相同，可參照border-style屬性學習理解。需要注意的是在border-color前最好先設置border-style，否則border-color可能會不顯示。
邊框寬度（border-width）border-width可定義四個邊框的寬度，即邊框的粗細程度，它有四個可選屬性值：medium (是缺省值，通常大約是2像素) thin(比medium細) thick(比medium粗) 用長度單位定值。可以用絕對長度單位(cm, mm, in, pt, pc)或者相對長度單位 (em, ex, px)。 border-width屬性值設置的個數與所對應方向產生的效果和border-style、border-color的設置方法相同，可參照border-style、border-color屬性學習理解。
邊框（border）border是一個綜合性寫法，它設置的是四個邊框的寬度、樣式和顏色，不能對某一個邊框單獨設置。它的格式：border: border-width border-style border-color;
示例：.bk01 {border:3px solid #FF0000;}
單邊邊框的設置方法除了以上介紹的幾種屬性，還有幾種屬性可以單獨定義各方向的邊框。下面對它們進行分類介紹。設定上邊框屬性：border-top，它的設置格式和border相同，依次設置寬度、樣式、顏色：border-top: border-width border-style border-color;border-top是將寬度、樣式、顏色三種屬性值放在一起設置的屬性，如果要單獨設置其中的任意一項也可以使用以下屬性：border-top-width（單獨設置上邊框寬度）、border-style（單獨設置上邊框樣式）、border-color（單獨設置上邊框顏色）。示例：#sbk01 {border-top-width:1px;border-top-style:dashed;border-top-color:#FF0000;}/*設置上邊框為寬度1像素的紅色虛線*/}以上的效果如果用border-top來設置的話更簡單一些，代碼如下：#sbk01 {
border-top:1px dashed #FF0000; }設定右邊框屬性：border-right，border-right-width，border-right-style，border-right-color，設置方法同border-top。設定下邊框屬性：border-bottom，border-bottom-width，border-bottom-style，border-bottom-color，設置方法同border-top。設定左邊框屬性：border-left，border-left-width，border-left-style，border-left-color，設置方法同border-top。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：用HTML和CSS以及JS制作簡單的網頁菜單界面的代碼

下一篇：初識CSS（初學者必看）