CSS是一個孰能生巧的東西，就是要天天用天天寫，很多屬性如果能用CSS寫出來的話，JS會好些很多。

so有一些新的或是記不住的屬性我覺得比較重要，怕自己會忘記所有特別開一個小部落格來記錄一下。

關於相容性：因為css3的一些屬性在部分瀏覽器可能不被識別所以要在屬性前面加瀏覽器廠商的識別符號

火狐： -moz- (-moz-linear-gradient(top,#fff,#fff111))
google : -webkit-
歐朋：-o- （這個我喜歡）

1.首先是CSS3裡的一些屬性：

(1)text-shadow（文字陰影）和box-shadow（盒子陰影）

//第一個值是：水平陰影的位置。允許負值，第二個:垂直陰影的位置。允許負值。第三個：模糊的距離。第四個：陰影的顏色
//box-shadow也是一樣
text-shadow：5px 5px 5px #fff

(2)box-sizing
在CSS中有兩種盒子模型一種就是W3C的還有一種就是IE的，他們不同之處在於W3C是算元素框內容的尺寸，而IE則是算整個元素框包括了寬高，邊框等。現在大部分的瀏覽器都是以W3C的標準來的，我個人比較喜歡IE的盒子模型（就這一個D:）;

box-sizing有兩個屬性

1. content-box:僅包括content.即設定的width屬性值僅為content的值。（box-sizing的預設值） 
2. border-box:包括content+padding+border.設定的width的值是content+padding+border的值.
 

(3)Rgba
Raba和opacity都是製作透明背景，不同之處在於Rgba更好控制，並且他不會使得文字也變透明下面這篇部落格他非常詳細的講解了Rgba的用法對比了和opacity的優缺點，還有關於相容性的問題.

基本語法:

R：紅色值。正整數 （0~255）

G：綠色值。正整數 （0~255）

B：藍色值。正整數（0~255）

A：透明度。取值0~1之間
　　
rgba(20,20,20,0.4)

參考地址：https://www.cnblogs.com/xiao-pang/p/5517222.html

(4)outline
使你的邊框不在干擾你的兄弟元素。
如果你給你的標籤添加了滑鼠事件，或者hover加個邊框。那麼你會發現因為box-sizing（參考第二條）的原因，你的邊框會擠壓你的兄弟元素造成變形。

解決這個問題有兩個辦法

第一種用outline替代border。
語法：outline：1px solid #fff;

第二種是我在之前不知道這個元素的時候用的一個辦法，那就是在給元素新增事件增加邊框之前，就新增一個和元素背景顏色一樣的邊框，大小也要一樣，然後你在用滑鼠事件的時候就不會擠壓兄弟元素了。

#box{
width：100px；
height：100px；
background：#0D86FF；
border：1px solid #0D86FF；
}

#box:hover{
border:1px solid #68696E;
}

(5)background:linear-gradient(top right,green,red,blue);
背景顏色漸變，上面是語法。
第一個屬性的是指定從哪裡開始，然後如果你想從一個角落開始那麼在兩個方向之間加一個空格就行了。top right，不然就只需要一個屬性即可。
第二個屬性就是顏色了，制定從什麼顏色開始漸變。
第三個屬性也是顏色，制定漸變後的顏色，還可以多次新增顏色。
從黃色漸變到綠色在漸變到灰色，只要 color，color，color就ok了

(6) transition
這是css3的運動屬性，需要配合 元素:hover使用。
語法：
分開寫法：
transition-property：width //指定監控的屬性
transition-duration：2s //指定運動時間
transition-delay：0.5s //指定延遲時間
transition-timing-function：ease-in //運動曲線

簡寫 ：transition: width 3s 0.2s ease-in；

#hd:hover{
width:300px
}
上面這個code會讓，ID為hd的標籤在滑鼠放上去之後經過0.2s的延遲之後寬度變為300px，並且運動軌跡是由慢到快。

第一個屬性是可以指定方向，比如寬高，left，right等屬性，或者可以用all 所有的方向都指定。
第二個屬性是指定運動的時間
第三個屬性是延遲，滑鼠放在目標上多少秒之後可以產生變化，這樣是為了防止你滑鼠不小心放上去之後鬼畜
第四個屬性是運動軌跡這個可以去檢視transition的API有哪些屬性可以呼叫

transition屬性可以監控transform屬性，這個可以做一些有趣的效果

（7）transform
這是CSS3的變形效果，transition，transform這兩個屬性學問還是很大的再次只能是作為一個提點自己的作用，詳細的還是瀏覽下列博文

CSS3 transform介紹：https://www.jianshu.com/p/17e289fcf467

語法:transform :rotate | scale |skew |translate
		transform:rotate(30deg)
	-
說明：
rotate(angle):                          //制定一個2d旋轉，正數順時針，負數逆時針旋轉；
translate(x,y):							//設定移動效果，就是讓元素相對於現在的未知去進行一個平移
scale（number，number）					//縮放效果scale（1.8,0.6） 兩個引數分別是X軸和Y軸
skew（angle，angle）						//扭曲的效果skew（30deg，60deg）
-	
transform-origin ：設定旋轉的基本點未知
	語法；transform-origin：20% 40%