CSS border 屬性及用border畫各種圖形

CSS border 屬性

定義和用法

border 簡寫屬性在一個聲明設定所有的邊框屬性。

可以按順序設定如下屬性： border-width border-style border-color

如果不設定其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。

預設值：	not specified
繼承性：	no
版本：	CSS1
JavaScript 文法：	object.style.border="3px solid blue"

可能的值

值	描述
border-width	規定邊框的寬度。參閱：border-width 中可能的值。
border-style	規定邊框的樣式。參閱：border-style 中可能的值。
border-color	規定邊框的顏色。參閱：border-color 中可能的值。
inherit	規定應該從父元素繼承 border 屬性的設定。

CSS border-width 屬性
定義和用法

border-width 簡寫屬性為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。

只有當邊框樣式不是 none 時才起作用。如果邊框樣式是 none，邊框寬度實際上會重設為 0。不允許指定負長度值。

可能的值

值	描述
thin	定義細的邊框。
medium	預設。定義中等的邊框。
thick	定義粗的邊框。
length	允許您自訂邊框的寬度。
inherit	規定應該從父元素繼承邊框寬度。

CSS border-style 屬性
定義和用法

border-style 屬性用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。

只有當這個值不是 none 時邊框才可能出現。
可能的值

值	描述
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	規定應該從父元素繼承邊框樣式。

CSS border-color 屬性

定義和用法

border-color 屬性設定四條邊框的顏色。此屬性可設定 1 到 4 種顏色。

border-color 屬性是一個簡寫屬性，可設定一個元素的所有邊框中可見部分的顏色，或者為 4 個邊分別設定不同的顏色。
可能的值

值	描述
color_name	規定顏色值為顏色名稱的邊框顏色（比如 red）。
hex_number	規定顏色值為十六進位值的邊框顏色（比如 #ff0000）。
rgb_number	規定顏色值為 rgb 代碼的邊框顏色（比如 rgb(255,0,0)）。
transparent	預設值。邊框顏色為透明。
inherit	規定應該從父元素繼承邊框顏色。

利用css畫圖形，是個有利有弊的寫法，好處是不用畫圖，且節省了一些流量，壞處是要寫長串的css樣式，而且有可能流量並沒有減少，用與否視情況而定，個人選擇。

下面是我做測試的一些圖形，也是參考了一些網站，簡單的註解一下和歸納了一下，其中並沒涉及到複雜的css畫圖形。

其中用了css3.0的一些屬性，所以這裡聲明：請用支援css3.0的瀏覽器看此文章。

 

上面這幾個相對比較簡單,沒什麼可解釋的,看下面源碼：

/*正方形*/.Square { width: 100px; height: 100px; background: #669; }

/*矩形*/.rectangle { width: 200px; height: 100px; background: #669; }

/*梯形*/.trapezoid { 

border-bottom: 100px solid #669; 

border-left: 50px solid transparent; 

border-right: 50px solid transparent; 

height: 0; 

width: 100px; }

/*平行四邊形*/.parallelogram { 

width: 150px; 

height: 100px; 

-webkit-transform: skew(-20deg); 

-moz-transform: skew(-20deg);