1、邊框樣式

邊框樣式屬性指定要顯示什么樣的邊界。

border-style屬性用來定義邊框的樣式

border-style 值:

none: 默認無邊框
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge: 定義3D脊邊框。效果取決于邊框的顏色值
inset:定義一個3D的嵌入邊框。效果取決于邊框的顏色值
outset: 定義一個3D突出邊框。 效果取決于邊框的顏色值

2、邊框?qū)挾?/p>

你可以通過 border-width 屬性為邊框指定寬度。

為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關(guān)鍵字之一，它們分別是 thick 、medium（默認值） 和 thin。

注意：CSS 沒有定義 3 個關(guān)鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設(shè)置為等于 5px、3px 和 2px，而另一個用戶則分別設(shè)置為 3px、2px 和 1px。

實例

p.one { border-style:solid;     border-width:5px; } p.two { border-style:solid;     border-width:medium; }

3、邊框顏色

border-color屬性用于設(shè)置邊框的顏色。可以設(shè)置的顏色：

name - 指定顏色的名稱，如 "red"

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

Hex - 指定16進制值, 如 "#ff0000"

你還可以設(shè)置邊框的顏色為"transparent"。

注意： border-color單獨使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式。

實例：

p.one { border-style:solid;     border-color:red; } p.two { border-style:solid;     border-color:#98bf21; }

4、邊框-單獨設(shè)置各邊

在CSS中，可以指定不同的側(cè)面不同的邊框：

實例：
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
上面的例子也可以設(shè)置一個單一屬性：

實例
border-style:dotted solid;

border-style屬性可以有1-4個值：

border-style:dotted solid double dashed;

上邊框是 dotted

右邊框是 solid

底邊框是 double

左邊框是 dashed

border-style:dotted solid double;

上邊框是 dotted

左、右邊框是 solid

底邊框是 double

border-style:dotted solid;

上、底邊框是 dotted

右、左邊框是 solid

border-style:dotted;

四面邊框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

5、邊框-簡寫屬性

上面的例子用了很多屬性來設(shè)置邊框。

你也可以在一個屬性中設(shè)置邊框。

你可以在"border"屬性中設(shè)置：

border-width

border-style (required)

border-color

實例
border:5px solid red;

當(dāng)然，上述的5個CSS邊框?qū)傩圆⒉荒馨械倪吙驅(qū)傩裕皇翘暨x出了CSS邊框中最重要的幾個屬性來講，想要連接CSS邊框的全部屬性，我們可以參考本站的CSS教程中給出的CSS邊框?qū)傩詧D，圖中對每個邊框?qū)傩缘拿枋龆己芫_，想深入學(xué)習(xí)的小伙伴可以結(jié)合CSS邊框?qū)傩詧D，徹底弄清楚CSS邊框的知識。