這幾天使用border-raduis畫了各種形狀，順帶歸納了一下css中的border屬性,本篇筆記中主要涉及的知識點有：
1.border屬性
2.css3新增的3個border屬性：border-color、border-radius、border-image
border屬性：
語法：border:border-width border-style border-color，單獨設定邊框時使用以下幾個屬性:
border-left 設定左邊框，一般單獨設定左邊框樣式使用
border-right 設定右邊框，一般單獨設定右邊框樣式使用
border-top 設定上邊框，一般單獨設定上邊框樣式使用
border-bottom 設定下邊框，一般單獨設定下邊框樣式使用。
通常我們對邊框設定寬度（厚度）、邊框樣式、邊框顏色這三個屬性與引數,例：border:1px solid red;。
border-width:可以用數值或者屬性值（thin、medium、thick、inherit（ie都不支援））；使用數值必須為正數字，否則無效。
可以是乙個值（4個邊框相同）、2個值（前者為上下邊框，後者為左右邊框）、3個值（中間值代表左右邊框）
.border-width:border-top-width border-right-width border-bottom-width border-left-width;(上右下左)
border-style邊框樣式值如下：
none : 無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。ie不支援
dotted : 點線。
dashed : 虛線。
solid : 實線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove : 根據border-color的值畫3d凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3d凹邊
outset : 根據border-color的值畫3d凸邊
設定0 和none的差異：
border:0;把border設為「0」畫素雖然在頁面上看不見，但按border預設值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經占用了記憶體值。
border:none;把border設為「none」即沒有，瀏覽器解析「none」時將不作出渲染動作，即不會消耗記憶體值。
border樣式不可繼承。
css3新增的屬性：border-color、border-radius、border-image：
邊框顏色border-color:
border-color設定邊框的顏色，如果想給4個邊框分別設定不同的顏色，例如乙個邊框上多個色彩，可以使用border-color來實現，目前應用該屬性的範圍相對較小，只有firefox3.0以上的版本支援，記得加上-moz-字首。css**如下：
border-top-color: ....
border-right-color: ....
border-bottom-color:....
border-left-color: ....
*使用css3的border-color屬性時，如果你的boder寬度設定了x px,那麼你可以在這個邊框上使用x種顏色，此時每乙個顏色就是乙個px，如果你的border寬度設定了10px，而你只運用了三四個顏色，那麼最後乙個顏色將會填充到後面的寬度上。
圓角border-radius:
語法：border-radius ： none | [/ ] 兩個由浮點數字和單位識別符號組成，不可為負值。一般會把"/"省略，表示水平和垂直半徑都相等。
目前以下瀏覽器版本支援這一屬性：firefox4.0 、safari5.0 、google chrome 10.0 、opera 10.5 、ie9 。
值的設定：
mozilla提供的文件很好地介紹了這幾個值：
>如果只設定了乙個值，那麼radius講作用於4個圓形角
>兩個值，那麼第乙個值作用於左上角與及右下角，第二個值作用於右上角及左下角(x交叉)
>三個值，那麼第乙個值作用於左上角，右上角和和左下角公用第二個值，第三個值將是右下角（左下和右上共用）
>四個值，那麼第乙個值作用於左上角，右上角，右下角，左下角（順時針）
邊框border-image:
語法 border-image ： none | | | |
border-image有六大屬性值，分別是：位址border-image-source、切片border-image-slice、寬度border-image-width、外凸border-image-outset、重複border-image-repeat
切片： [ length | percentage | number | auto ]數值百分比等，數值沒有單位。指定邊框影象頂部、右側、底部、左側內的偏移量。把邊框切成9個部分，俗稱「九宮格」，如圖所示：
1.剛好將border-image分成了九部分：border-top-image,border-right-image,border-bottom-image,border-left-image,border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image八個邊塊和最中間的內容區域。
2.border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image四個邊角部分，在border-image中是沒有任何展示效果的，稱為盲區。
而對應的border-top-image,border-right-image,border-bottom-image,border-left-image四個黃色區域在border-image中是屬於展示效果的區域。上下區域border-top-image和border-bottom-image區域受到水平方向效果影響。
邊框的寬度：使用數值時同樣不需要加上px,加上反而是錯誤的，這裡可以設定1-4個值。 或者 百分比
Css3中的背景
css3對背景作了很多改變，最明顯的是可以選擇多重背景，同時它也增加了四個新的屬性。多重背景 css3中，對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外，其 與css2相同。第乙個宣告的定位在元素的頂部，接下來的層列於下，像這樣 該屬確定背景畫區，有以下幾種可能的屬性 background...
CSS3中的動畫
animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...
CSS3中的屬性
讓邊框變成圓角 border radius 100px border radios 10px 20px 30px 40px transform rotate 45deg retate是順時針旋轉角度 transform translate 50px,100px 把元素從左側移動 50 畫素，從頂端移...