CSS 邊框樣式

本節我們來學習邊框樣式，主要包括如何設定邊框的寬度、邊框的顏色、邊框的樣式等。當我們給某個元素設定邊框時，可以分為上下左右四個邊框，既可以同時設定四個邊框的樣式，也可以分開設定四個邊框的樣式。

關於邊框樣式的四個屬性：

屬性描述

border-width

設定邊框的寬度

border-style

設定邊框的樣式

border-color

設定邊框的顏色

border

在乙個宣告中設定所有的邊框屬性

border-width

border-width屬性用於設定邊框的寬度，也就是邊框的粗細。

常用屬性值如下所示：

屬性值描述

thin

定義細的邊框

medium

預設，定義中等的邊框

thick

定義粗的邊框

length

自定義邊框的寬度，單位為畫素px

inherit

規定應該從父元素繼承邊框寬度

我們一般會使用length作為border-width屬性的屬性值，即設定邊框的粗細為多少畫素，例如1px、2px、3px等。border-width屬性可以同時為所有邊框設定寬度，也可以單獨地為每個邊框設定寬度。

示例：為上、右、下、左四個邊框分別設定邊框粗細：

border-top-width
:1px;
border-right-width
:1px;
border-bottom-width
:1px;
border-left-width
:1px;

根據簡寫屬性border-width，我們也可以直接寫成：

border-width
:1px 2px 3px 4px;

記住在簡寫時，為邊框設定寬度的順序為上、右、下、左，是順時針順序。

而當元素的上下邊框或左邊框的寬度一致時，也可以使用簡寫，例如上下邊框為1px、左右邊框為2px，可以寫成：

border-width
:1px 2px;

border-style

border-style屬性用於設定元素的邊框樣式。和border-width一樣，可以同時為四個邊框設定邊框樣式，也可以分別為每個邊框單獨設定邊框樣式。

border-style的屬性值有很多個，但是在實際網頁製作中，常用屬性值有下面四種：

屬性值描述

dotted

定義點狀邊框

dashed

定義虛線邊框

solid

定義實線邊框

none

無邊框示例：

例如設定上、右、下、左的邊框樣式為實線、虛線、實線、虛線：

border-top-style
:solid;
border-right-style
:dashed;
border-bottom-style
:solid;
border-left-style
:dashed;

可以簡寫成：

border-style : solid dashed solid dashed;

當元素的上下邊框和左右邊框樣式一致時，也可以寫成：

border-style
: solid dashed;

border-color

border-color屬性可以用於設定邊框顏色。屬性值可以是任何合法的顏色值，例如顏色名、十六進製制顏色值、rgb顏色值等。

border-color屬性同樣可以同時設定四個邊框的顏色，也可以單獨設定四條邊框的顏色。

示例：例如設定上、右、下、左邊框顏色為紅黃藍綠：

border-top-color
:red;
border-right-color
:yellow;
border-bottom-color
:blue;
border-left-color
:green;

可以簡寫為：

border-color
:red yellow blue green;

border

上面我們講了border-width、border-style、border-color三個屬性，但是其實我們在實際應用中，一般不會單獨來設定邊框寬度或者顏色等，而是直接使用通過border簡寫屬性來設定所有的邊框屬性。

border屬性可以直接設定所有邊框的樣式，如果要單獨設定每個邊框的樣式則可以使用border-top、border-right、border-bottom、border-left。

示例：將下面這個標籤的邊框設定成 3畫素、虛線、紫色：

>
charset
="utf-8"
>
>
css學習(9xkd.com)title
>
rel=
"stylesheet"
type
="text/css"
href
="index.css"
>
head
>
>
>
設定乙個邊框div
>
body
>
html
>
css 樣式**：
div

在瀏覽器中的演示效果：

CSS 邊框樣式

CSS 邊框樣式

CSS邊框樣式

CSS邊框樣式

CSS 邊框樣式

CSS 邊框樣式

CSS邊框樣式

CSS邊框樣式

相關推薦