HTML之CSS (Border)邊框<一>（邊框樣式和邊框?qū)挾龋?/h1>

素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。

邊框樣式

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

border-style的值：

（1）編輯代碼

打開記事本，編寫其代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

例

設(shè)置四個邊框樣式：

p

{

border:5px solid red;

}

---

標簽定義及使用說明

縮寫邊框?qū)傩栽O(shè)置在一個聲明中所有的邊框?qū)傩浴?p>

可以設(shè)置的屬性分別（按順序）：border-width, border-style,和border-color.

如果上述值缺少一個沒有關(guān)系，例如border：＃FF0000;是允許的。

默認值:	not specified
繼承:	no
版本:	CSS1
JavaScript 語法:	objectobject.style.border="3px solid blue"

---

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

屬性
border	1.0	4.0	1.0	1.0	3.5

---

屬性值

值	說明
border-width	指定邊框的寬度
border-style	指定邊框的樣式
border-color	指定邊框的顏色
inherit	指定應(yīng)該從父元素繼承border屬性值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

例

設(shè)置四個邊框的樣式：

p

{

border-style:solid;

}

---

屬性定義及使用說明

border-style屬性設(shè)置一個元素的四個邊框的樣式。此屬性可以有一到四個值。

實例:

border-style:dotted solid double dashed;

• 上邊框是點狀

• 右邊框是實線

• 下邊框是雙線

• 左邊框是虛線

border-style:dotted solid double;

• 上邊框是點狀

• 右邊框和左邊框是實線

• 下邊框是雙線

border-style:dotted solid;

• 上邊框和下邊框是點狀

• 右邊框和左邊框是實線

border-style:dotted;

• 所有4個邊框都是點狀

默認值:	not specified
繼承:	no
版本:	CSS1
JavaScript 語法:	objectobject.style.borderStyle="dotted double"

---

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

屬性
border-style	1.0	4.0	1.0	1.0	3.5

---

屬性值

值	描述
none	定義無邊框。
hidden	與 "none" 相同。不過應(yīng)用于表時除外，對于表，hidden 用于解決邊框沖突。
dotted	定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
dashed	定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等于 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決于 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決于 border-color 的值。
inset	定義 3D inset 邊框。其效果取決于 border-color 的值。
outset	定義 3D outset 邊框。其效果取決于 border-color 的值。
inherit	規(guī)定應(yīng)該從父元素繼承邊框樣式。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：css flex 實戰(zhàn)-常見的網(wǎng)頁布局
下一篇：如何使用 CSS 代碼制作一個簡易愛心，編程獅教你