在早期如果我們必須要撰寫一個最基礎的圓弧效果時，
是必須要寫很多瀏覽器前綴詞的，譬如這樣：

.box{
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

如果要修改數值時，則就必須改五次的數值，
相對來說重工率也跟著提升，
更別說同時要撰寫圓弧、陰影、背景漸層這類最基礎的效果了。
光寫一個樣式就必須寫十幾行，
以至於有些網頁設計師寧願切一張圖片當作背景，
但也因此提升了網頁請求數量，流量也相對變高許多，
這個問題在當時也造成設計師在設計CSS上的困擾。

直到Sass/Compass發跡以後，
撰寫CSS3樣式真的輕鬆許多了，
在早期如果我們必須要撰寫一個最基礎的圓弧效果時，
是必須要寫很多瀏覽器前綴詞的，譬如這樣：

.box{
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

如果要修改數值時，則就必須改五次的數值，
相對來說重工率也跟著提升，
更別說同時要撰寫圓弧、陰影、背景漸層這類最基礎的效果了。
光寫一個樣式就必須寫十幾行，
以至於有些網頁設計師寧願切一張圖片當作背景，
但也因此提升了網頁請求數量，流量也相對變高許多，
這個問題在當時也造成設計師在設計CSS上的困擾。

直到Sass/Compass發跡以後，
撰寫CSS3樣式真的輕鬆許多了，
他的程式碼只要短短一行就可以展示出上面的效果出來：

@import compass/css3
.box{
  +border-radius(100%)
}

首先要先載入Compass的CSS3 mixin後，
使用+border-radius來呼叫該mixin，
再把數值寫進去就會自動載入所有前綴支援語法，

兩年前我決定要學習Sass/Compass時，
也是因為這神奇的CSS3 Mixin讓我決心要好好的學習，
因為Sass最主要的工作就是讓你可以專心的撰寫樣式上面，
並同時減少過度重工的機會。

我現在比較常用的樣式則是

//圓弧效果
.box{
  +border-radius(100%)
}
//區塊陰影
.box{
  +box-shadow(30px 30px 30px #000)
}
//背景漸層
.box{
  +background(linear-gradient(white,black))
}

這三種是我比較有在實際應用的，
因為這幾種靜態效果，
就算IE不支援，也不會過於破壞整體版型樣式。

如果你希望IE6~9也可以支援CSS3的話，
那一定要來試試看CSS3 PIE，
http://css3pie.com/

使用他的話，
上述三種所提到的靜態樣式功能也可以很友善地去做兼容性，
更神的是Compass也支援！
所以從官網下載該檔案後，並放到CSS的資料夾，
就可以開始來撰寫嘍。
程式碼只要寫：

@import compass/css3
@import compass/css3/pie
.box
  +pie
  +border-radius(100%)

釋出來的CSS就會變成：

.box {
  behavior: url('/css/PIE.htc')
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

Sass寫了+pie的用意，
主要就是為了引入這一行來去做IE兼容性→behavior: url('/css/PIE.htc')

使用CSS3 PIE時，
也請不要太過度使用他，
因為他是透過載入HTC檔來進行CSS3兼容化，
所以你如果太多地方都用了CSS3靜態效果，
也會導致你的網頁處理速度過慢，
進而降低客戶瀏覽意願。

有些網頁設計師會不使用CSS3 PIE的效果，但在用IE網頁瀏覽上也不影響其流暢性，至多是稍微醜了一些。這個行為也稱為「優雅降級與漸進增強」，使用較好的瀏覽器就可以體驗更好的網頁設計功能。
但也有部分的人因為甲方不認同這觀念，希望所有瀏覽器都長得一致，那CSS3 PIE就會是一個不錯的替代方案，
一些經驗談提供給各位參考，另也附上操作流程影片提供大家參考與學習:D