CSS3 邊框重識

border：border-width border-style border-color

- 三個屬性沒有先後順序，其中，border-style為必需。

- border-width預設值為「 medium」（大約3～4px）。

好噠～試試利用border製作三角形

原來：如果寬度和高度為0，border也可以組成乙個框。

分割原理如下圖：

border-color：[| transparent ] | inheritborder-color通常最多接受四值語法。

如果設定了大於四個的顏色會怎樣呢？

試一把～

這裡border-color能實現乙個漸變效果，但目前相容性較差，且不是標準寫法（以下例項來自火狐3.0以上）。將標準寫法拆分為四個邊框，使用多色才會有效。如果設定n個顏色，且邊框寬度為n的話，每種顏色顯示1px，如果寬度大於顏色數量，前面每個顏色顯示1px，剩下所有寬度顯示最後乙個顏色。

border-image ： none |  [  | ] [ /  ]? [ stretch | repeat | round ]

邊框是乙個相對複雜的屬性，因為它有乙個剪下特性，然後結合排列方式能產生神奇效果。

原始如下：

然而花樣可以是這樣：

還可以是這樣：

原理就是通過設定其四個方位的寬度將原始slice成九宮格，然後設定（原始中黃色部分，也就是效果展示區域）的鋪放方式。

注意repeat和round差別：repeat是邊框從中間向兩邊平鋪，round會對切片壓縮或拉伸以適應寬度。

注意內半徑與外半徑區別。當boder-radius半徑小於或等於boder寬度時內部圓角不明顯。

boder-radius 在img 和 table上的應用有差別。當table border-collapse是collapse時 **不能顯示圓角只有為separate 時，**圓角才能顯示。

半圓：把寬度設為高度的一半（寬度設為高度的一半），並且也只設定左上角和左下角的半徑或右上上和右下（左上和右上或右下和左下）。

.top

四分之一圓：把寬高相等，只設定乙個角的圓角半徑，且值與寬高相等。box-shadow：none | [inset? && [ ? ? ? ] ]#- 需要注意陰影層級關係：邊框》內陰影》背景》背景色》外陰影。

- 內陰影使用在img元素上無效果。

- 有多層陰影效果。

需注意陰影順序！有一些細節使用之前確實母雞啊～