1 box-shadow屬性與text-shadow（IE9+）

box-shadow屬效能使框新增一個或多個陰影，格式為：

box-shadow: h-shadow v-shadow [blur spread color inset];

其中：

• h-shadow：必選，表示水平方向陰影的位置，可以為負值；
• v-shadow：必選，表示垂直方向陰影的位置。可以為負值；
• blur：可選，表示模糊度；
• spread：可選，陰影的大小尺寸；
• color：可選，顏色；
• inset：可選，用於改寫成內陰影，預設值是outset，可以改寫成inset

box-shadow: 10px 10px
 
 10px 10px black inset;

text-shadow屬性向文字新增一個或多個陰影，格式為：

text-shadow:h-shadow v-shadow blur color;

定義按鈕凹下去的效果，可以這樣定義

.active {
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);//定義內外陰影
    text-shadow: 0 1px 0 rgba(0,0,0,.1);
}

2 opacity屬性與rgba屬性

2.1 opacity屬性

opacity

2.2 rgba屬性（IE9）

rgba屬性類似於rgb屬性用於表達顏色，區別在於rgba還多一個引數用於表示透明度。該透明度取值範圍為0~1。
與opacity不同的是，子元素不會被其影響，例：

background-color:rgba(255,255,255,0.1);

3 線性漸變顏色linear-gradient屬性（IE10+）

具體看這裡

background屬性使用linear-gradient

linear-gradient(angle,color-top length || percentage,color length || percentage)

其中：

• angle表示漸變線的方向，關鍵字值有to left，to right，to top，以及預設值to bottom，另外還可以使用角度如270deg
• color-top：指定初始顏色
• color：結尾顏色
• length 或 percentage ：定義止色位置

例項如：

body {
    background:linear-gradient(#191c20 0%, #24292e 15%) ;
}

3 關於檢測使用者縮放瀏覽器

在編寫固定定位的時候，當縮放瀏覽器並進行滾動頁面時，有時會想要取消掉固定定位，這時可以使用上jQueryresize()事件以及scroll事件。

3.1 resize()事件與scroll()事件

3.1.1

注：CSS中的resize屬性可用於允許使用者調節元素的尺寸大小， 數值有none(預設值)，both(高和寬都可調控)，horizontal(可調寬)，vertical(可調高)。
常常用設定瀏覽器預設的textarea標籤，使之不可大小不由使用者調控。
Firefox 4+、Safari 以及 Chrome 支援 resize 屬性。

JavaScript的onresize()事件對應jQuery的就是resize()事件，當瀏覽器視窗大小被調整時就會觸發事件函式。一般來說，resize事件函式都會繫結在$(window)物件（JavaScript的是window物件或body標籤）中。

3.1.2 scroll()事件

JavaScript的onscroll()事件對應jQuery的就是scroll()事件，當瀏覽器滾動條被滾動時就會觸發事件函式。一般來說，scroll事件函式都會繫結在$(window)物件（JavaScript的是window物件或body標籤）中。
有了事件函式的支援，通過一些元素的屬性比較，可以決定響應的動作。

3.2 scrollLeft()方法，scrollTop()方法，offset().top屬性以及offset().left屬性

這些方法屬性都是對應jQuery物件的方法屬性，使用$(window).width()以及$(window).height()方法可以返回瀏覽器可視視窗的寬度以及長度

3.2.1 scrollLeft()方法，scrollTop()方法

scrollLeft()，scrollTop()方法是一個用於返回或設定瀏覽器滾動頁面，滾動了的距離，一般來說都是繫結$(window)物件。

使用 scrollLeft() 以及 scrollTop() 實質是呼叫window.pageXOffset 以及 window.pageYOffset（這兩個屬性都不相容IE8，IE8使用的是 document.documentElement.scrollLeft 以及 document.documentElement.scrollTop）

3.2.2 offset()方法，offset().top屬性以及offset().left屬性

offset()方法用於返回或設定匹配元素相對於文件的偏移（位置），如果要設定位置，則需要匯入一個含top以及left鍵值對的物件作為引數，所以同理offset().top屬性可以返回匹配元素的偏移縱座標，offset().left屬性返回匹配元素的偏移橫座標。

通過繫結scroll()和resize()事件函式，比較offset().top與scrollTop()或offset().left與scrollLeft()的對應值，就可以編寫出對應的響應動作。
注意：使用animate()方法調整滾動距離時，其作用物件是$('html,body')而不是$(window)