css 邊框(border)例項：元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
css border 屬性允許你規定元素邊框的樣式、寬度和顏色。
css 邊框屬性
屬性 描述
border 簡寫屬性，用於把針對四個邊的屬性設定在乙個宣告。
border-style 用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
border-width 簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。
border-color 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。
border-bottom 簡寫屬性，用於把下邊框的所有屬性設定到乙個宣告中。
border-bottom-color 設定元素的下邊框的顏色。
border-bottom-style 設定元素的下邊框的樣式。
border-bottom-width 設定元素的下邊框的寬度。
border-left 簡寫屬性，用於把左邊框的所有屬性設定到乙個宣告中。
border-left-color 設定元素的左邊框的顏色。
border-left-style 設定元素的左邊框的樣式。
border-left-width 設定元素的左邊框的寬度。
border-right 簡寫屬性，用於把右邊框的所有屬性設定到乙個宣告中。
border-right-color 設定元素的右邊框的顏色。
border-right-style 設定元素的右邊框的樣式。
border-right-width 設定元素的右邊框的寬度。
border-top 簡寫屬性，用於把上邊框的所有屬性設定到乙個宣告中。
border-top-color 設定元素的上邊框的顏色。
border-top-style 設定元素的上邊框的樣式。
border-top-width 設定元素的上邊框的寬度。
##################
定義和用法
border-style 屬性用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
只有當這個值不是 none 時邊框才可能出現。
例子 1
border-style:dotted solid double dashed;
上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線
####################
可能的值
值 描述
none 定義無邊框。
hidden 與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed 定義虛線。在大多數瀏覽器中呈現為實線。
solid 定義實線。
double 定義雙線。雙線的寬度等於 border-width 的值。
groove 定義 3d 凹槽邊框。其效果取決於 border-color 的值。
ridge 定義 3d 壟狀邊框。其效果取決於 border-color 的值。
inset 定義 3d inset 邊框。其效果取決於 border-color 的值。
outset 定義 3d outset 邊框。其效果取決於 border-color 的值。
inherit 規定應該從父元素繼承邊框樣式。
##########################
1.所有邊框屬性在乙個宣告之中
本例演示用簡寫屬性來將所有四個邊框屬性設定於同一宣告中。
some text
2.設定四邊框樣式
本例演示如何設定四邊框樣式。
a dotted border
a dashed border
a solid border
a double border
a groove border
a ridge border
an inset border
an outset border
3.設定每一邊的不同邊框
本例演示如何在元素的各邊設定不同的邊框。
some text
some text
some text
some text
4.所有邊框寬度屬性在乙個宣告之中
本例演示用簡寫屬性來將所有邊框寬度屬性設定於同一宣告中。
some text
some text
some text
some text
some text
5.設定四個邊框的顏色
本例演示如何設定四個邊框的顏色。可以設定一到四個顏色。
some text
some text
some text
some text
6.所有下邊框屬性在乙個宣告中
本例演示用簡寫屬性來將所有下邊框屬性設定在同一宣告中。
this is some test
7.設定下邊框的顏色
本例演示如何設定下邊框的顏色。
this is some text in a paragraph.
8.設定下邊框的樣式
本例演示如何設定下邊框的樣式。
title
no bottom border.
a dotted bottom border.
a dashed bottom border.
a solid bottom border.
a double bottom border.
a groove bottom border.
a ridge bottom border.
an inset bottom border.
an outset bottom border.
9.設定下邊框的寬度
本例演示如何設定下邊框的寬度。
注釋「border-nottom-widt」 屬性如果單獨使用得話是不會起作用的。請首先使用"border-style" 屬性來設定邊框
some text.
10.所有左邊框屬性在乙個宣告之中
所有左邊框屬性在乙個宣告之中
this is some text
11.設定左邊框的顏色
本例演示如何設定左邊框的顏色。
some text.
12.設定左邊框的樣式
本例演示如何設定左邊框的樣式。
no left border.
a dotted left border.
a dashed left border.
a solid left border.
a double left border.
a groove left border.
a ridge left border.
an inset left border.
an outset left border.
13.設定左邊框的寬度
本例演示如何設定左邊框的寬度。
注釋："border-left-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。
some text. some more text.
14.所有右邊框屬性在乙個宣告之中
本例演示乙個簡寫屬性，用於把所有右邊框屬性設定在一條宣告中。
this is some text
15.設定右邊框的顏色
本例演示如何設定右邊框的顏色。
some text.
16.設定右邊框的樣式
本例演示如何設定右邊框的樣式。
a dotted border
a dashed border
a solid border
a double border
a groove border
a ridge border
an inset border
an outset border
17.設定右邊框的寬度
本例演示如何設定右邊框的寬度。
title
注釋："border-right-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。
some text. some more text.
18.所有上邊框屬性在乙個宣告之中
本例演示用簡寫屬性來將所有上邊框屬性設定於同一宣告之中。
pthis is some text in a paragraph.
19.設定上邊框的顏色
本例演示如何設定上邊框的顏色。
注釋："border-right-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。
some text. some more text.
20.設定上邊框的樣式
本例演示如何設定上邊框的樣式。
no top border.
a dotted top border.
a dashed top border.
a solid top border.
a double top border.
a groove top border.
a ridge top border.
an inset top border.
an outset top border.
21.設定上邊框的寬度
本例演示如何設定上邊框的寬度。
注釋："border-top-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設定邊框。
some text. some more text.
CSS 邊框 border 例項
所有邊框屬性在乙個宣告之中 本例演示用簡寫屬性來將所有四個邊框屬性設定於同一宣告中。設定四邊框樣式 本例演示如何設定四邊框樣式。設定每一邊的不同邊框 本例演示如何在元素的各邊設定不同的邊框。所有邊框寬度屬性在乙個宣告之中 本例演示用簡寫屬性來將所有邊框寬度屬性設定於同一宣告中。設定四個邊框的顏色 本...
css 盒子邊框 border
1 css 邊框屬性 border width border style border color 1.1 邊框樣式 border style border style 值 none 預設無邊框 dotted 定義乙個點線邊框 dashed 定義乙個虛線邊框 solid 定義實線邊框 1.2邊框顏色...
邊框 border 的CSS簡寫方法
邊框 border 先介紹一下border的基本屬性 border width 數字 單位 border style none hidden dashed dotted double groove inset outset ridge solid border color 顏色 border可以按照...