一、粘滯定位

　　粘滯定位（sticky）與相對定位類似，既不會脫離正常流，也不會改變元素盒型別，並且會保留原先所佔的空間。它會相對於包含塊偏移，它的包含塊分為兩種，第一種和絕對定位一樣；第二種是最近的滾動祖先，即overflow屬性是hidden、scroll、auto或overlay時。接下來用一個例子來介紹粘滯定位的用法，如下程式碼所示。

<style>
  div {
    overflow: auto;
  }
  span {
    position: sticky;
    top: 10px;
    left: 20px;
    width: 70px;
    height: 50px;
    background: #CCC;
  }
</style>
<div>
  改變粘滯定位的位置，改變
  <span>粘滯定位的位置</span>
  ，改變粘滯定位的位置，改變粘滯定位的位置，
  改變粘滯定位的位置，改變粘滯定位的位置，
  改變粘滯定位的位置。
</div>

　　span元素的包含塊是div元素，下圖描繪了頁面滾動時，粘滯定位的效果。在中間圖中可以看到偏移後的span元素所佔的空間被保留了，在右邊圖中可以看到span元素粘滯在指定的偏移位置。

二、邊框影象

　　CSS3新增了一組屬性，允許在邊框中載入影象，接下來會逐個講解。

　　第一個是border-image-source屬性，它能指定影象來源，如下所示。在下圖中，會發現載入的影象位於div元素的四個角，而不是沿著邊框繪製。

div {
  border: 40px solid;
  border-image-source: url(./star.png);
}

　　注意，邊框寬度需要指定，並且其外觀不能是none，否則將無法顯示。

　　第二個是border-image-slice屬性，它包含四條裁剪線，可接收四個偏移值，分別距影象的上右下左四個邊，下圖演示了偏移33%時的裁剪線。

　　執行下面的樣式（效果如下圖所示），在將circle.png分解成9塊後，編號為1、2、3、4的四個圓位於div元素的四個角，而編號為5、6、7、8的四個圓則會被拉伸。

div {
  border-image-source: url(./circle.png);
  border-image-slice: 33%;
}

　　border-image-slice屬性還能接收一個fill關鍵字（如下圖所示），可將編號為9的圓作為div元素的背景圖。

div {
  border-image-slice: 33% fill;
}

　　第三個是border-image-repeat屬性，它能指定填充邊框的方式，預設是拉伸，現在改成平鋪（如下圖所示），邊界處的影象可能會被裁剪。

div {
  border-image-repeat: repeat;
}

　　第四個是border-image-width屬性，與border-image-slice屬性類似，也有4條裁剪線，只是它裁剪的物件是邊框。在下圖中，左邊是未定義border-image-width屬性的div元素，右邊是將該屬性設為20px後的效果。

div {
  border-image-width: 20px;
}

　　第五個是border-image-outset屬性，可宣告影象超出邊框的距離，即向外偏移。在下圖中，左邊是未定義border-image-outset屬性的div元素，右邊是將該屬性設為10px後的效果。

div {
  border-image-outset: 10px;
}

　　第六個是border-image屬性，可將上述5個屬性整合到一起，規定不同的值之間用斜槓（/）分隔，並且還指定了順序：首先是border-image-slice，然後是border-image-width，最後是border-image-outset。而border-image-source和border-image-repeat兩個屬性可放在任意位置，但要注意，不能放置在其它屬性值之中。下面是個整合示例，效果如下圖所示。

div {
  border-image: url(./circle.png) 33% / 20px / 10px repeat;
}

三、字元間距

　　letter-spacing屬性可定義字元之間的距離，可以突出某段文字，例如為p元素定義10px的字元間距，如下圖所示。 

<style>
  p {
    letter-spacing: 10px;
  }
</style>
<p>字元間距是10px</p>

四、文字陰影

　　text-shadow屬性可為文字新增陰影，適用於標題或短文字。陰影值由四部分組成，分別是顏色、橫向偏移、縱向偏移和模糊半徑。下面的示例為一段文字添加了灰色的陰影，效果如下圖所示。

<style>
p {
  text-shadow: #CCC 5px 10px 2px;
}
</style>
<p>My name is Strick.</p>

　　注意，模糊半徑越大，陰影就越模糊。妥善利用好text-shadow屬性，還能創造出3D效果，下面的樣式來源於網路，字型放大後，3D更明顯，效果如下圖所示。

p {
  font-size: 48px;
  text-shadow: 0 1px 1px #BBB, 
    0 2px 0 #999, 
    0 3px 0 #888, 
    0 4px 0 #777,
    0 5px 0 #666, 
    0 6px 0 #555, 
    0 7px 0 #444, 
    0 8px 0 #333, 
    0 9px 7px #302314;
}

五、多重背景

　　CSS3支援多重背景，大部分背景屬性都能通過逗號分隔多個值，包括簡寫的background屬性也能接受多個值。在下面的示例中，為div元素聲明瞭兩個背景，先宣告的star.png將會在lake.png之上，如下圖所示。

div {
  background-image: url(./star.png), url(./lake.png);
  background-position: left bottom, center;
  background-repeat: repeat-x, no-repeat;
}
/* 等價於 */
div {
  background: url(./star.png) left bottom repeat-x,
            url(./lake.png) center no-repeat;
}

　　注意，不能為background-color指定多個值。當用background屬性宣告多個背景時，顏色只能出現在最後一個背景層中，如下程式碼所示。

/* 錯誤 */
div {
  background: #FC0 url(./star.png) left bottom repeat-x,
            url(./lake.png) center no-repeat;
}
/* 正確 */
div {
  background: url(./star.png) left bottom repeat-x,
            #FC0 url(./lake.png) center no-repeat;
}

六、矩陣函式

　　在CSS中，矩陣函式是變形的基礎，位移、縮放、傾斜和旋轉四種變形都能用矩陣來實現，例如用矩陣函式來描述水平偏移10px，垂直偏移5px，程式碼如下所示。

.matrix {
  transform: matrix(1, 0, 0, 1, 10, 5);
  /* 等同於 */
  transform: translate(10px, 5px);
}

　　現在將矩陣函式的6個引數用小寫字母來命名，如下所示，

transform: matrix(a, b, c, d, e, f);

　　對應的矩陣如下所示，注意觀察6個引數的位置。

　　矩陣函式的原理是通過變更元素的所有座標，重新定位元素，從而實現各種變形。下面是矩陣的計算公式，其中x和y是元素的橫座標和縱座標。

　　ax+cy+e是變形後的橫座標，bx+dy+f是變形後的縱座標。具體的計算過程如下所示，以矩陣的第一行為例，相同底色的變數會相乘，得到的積再相加。

　　在下圖中，列出了與四類變形函式等效的矩陣符號（引用自《The CSS3 matrix() Transform for the Mathematically Challenged》一文），其中旋轉和傾斜還用到了三角函式。

　　在三維空間，也有一個對應的矩陣函式：matrix3d()，此處不再展開敘述，可以檢視網上的相關資料。

七、三維變形

　　在三維空間中有三個軸，如下圖所示，其中Z軸表示使用者與平面的距離（即透視值）。

　　perspective()是一個透視函式，它能接收一個非零正數透視值。在下面的示例中，會讓四個元素圍繞Y軸旋轉30°，除了第一個元素，其它都呼叫了透視函式。通過下圖的效果可知，當透視值越小時，變形效果越失真。

.rotate {
  transform: rotateY(30deg);
}
.perspective-200 {
  transform: perspective(200px) rotateY(30deg);
}
.perspective-600 {
  transform: perspective(600px) rotateY(30deg);
}
.perspective-1200 {
  transform: perspective(1200px) rotateY(30deg);
}

　　注意，透視函式需要宣告在變形函式列表的首位，以免在透視前變形，呈現錯誤的效果。

　　除了perspective()函式之外，CSS3還提供了一個perspective屬性。前者只能為目標元素宣告透視，而後者宣告的透視能應用於其子元素。舉個簡單的例子，為父元素section宣告perspective屬性，子元素仍舊圍繞Y軸旋轉30°，程式碼如下所示，得到的效果如下圖所示。

<style>
  .perspective {
    perspective: 200px;
  }
  .perspective > div {
    transform: rotateY(30deg);
  }
</style>
<section class="perspective">
  <div>200px</div>
  <div>200px</div>
</section>

　　perspective-origin屬性可修改透視原點，也叫消失點，其取值與transform-origin類似。預設情況下，這個點位於元素的中心，接下來修改上例父元素的透視原點，樣式如下，效果如下圖所示。

.perspective {
  perspective-origin: top left;
}

　　backface-visibility屬性可控制元素背面朝向使用者時是否渲染，利用該屬性可設計出3D翻轉的特效。接下來會一步步的實現該功能，首先是建立HTML結構，如下所示，section是兩個div的父元素。

<section class="flip">
  <div class="positive">正面</div>
  <div class="reverse">反面</div>
</section>

　　然後在父元素中新增過渡時間和透視，並將transform-style屬性設為preserve-3d，這樣才能讓子元素和父元素處於同一個三維空間，樣式如下。

.flip {
  position: relative;
  width: 100px;
  height: 100px;
  transition: 0.6s;
  transform-style: preserve-3d;
  perspective: 1000px;
}

　　再將兩個子元素的backface-visibility屬性設為hidden，並且將第二個div元素圍繞Y軸旋轉180°，樣式如下。

.flip > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip .positive {
  background: #FC0;
}
.flip .reverse {
  background: #F60;
  transform: rotateY(180deg);
}

　　最後為父元素定義:hover偽類，也就是在滑鼠懸停時，自身也圍繞Y軸旋轉180°，隱藏第一個div元素，顯示第二個div元素，樣式如下。

.flip:hover {
  transform: rotateY(180deg);
}

　　由於是動態的效果，因此需要用多張圖來描繪翻轉的過程，如下圖所示。