## 一、粘滯定位 &emsp;&emsp;粘滯定位（sticky）與相對定位類似，既不會脫離正常流，也不會改變元素盒類型，并且會保留原先所占的空間。它會相對于包含塊偏移，它的包含塊分為兩種，第一種和絕對定位一樣；第二種是最近的滾動祖先，即overflow屬性是hidden、scroll、auto或overlay時。接下來用一個例子來介紹粘滯定位的用法，如下代碼所示。 ~~~html <style> div { overflow: auto; } span { position: sticky; top: 10px; left: 20px; width: 70px; height: 50px; background: #CCC; } </style> <div> 改變粘滯定位的位置，改變 <span>粘滯定位的位置</span> ，改變粘滯定位的位置，改變粘滯定位的位置， 改變粘滯定位的位置，改變粘滯定位的位置， 改變粘滯定位的位置。 </div> ~~~ &emsp;&emsp;span元素的包含塊是div元素，下圖描繪了頁面滾動時，粘滯定位的效果。在中間圖中可以看到偏移后的span元素所占的空間被保留了，在右邊圖中可以看到span元素粘滯在指定的偏移位置。 :-:  ## 二、邊框圖像 &emsp;&emsp;CSS3新增了一組屬性，允許在邊框中加載圖像，接下來會逐個講解。 &emsp;&emsp;第一個是border-image-source屬性，它能指定圖像來源，如下所示。在下圖中，會發現加載的圖像位于div元素的四個角，而不是沿著邊框繪制。 ~~~css div { border: 40px solid; border-image-source: url(./star.png); } ~~~ :-:  &emsp;&emsp;注意，邊框寬度需要指定，并且其外觀不能是none，否則將無法顯示。 &emsp;&emsp;第二個是border-image-slice屬性，它包含四條裁剪線，可接收四個偏移值，分別距圖像的上右下左四個邊，下圖演示了偏移33%時的裁剪線。 :-:  &emsp;&emsp;執行下面的樣式（效果如下圖所示），在將circle.png分解成9塊后，編號為1、2、3、4的四個圓位于div元素的四個角，而編號為5、6、7、8的四個圓則會被拉伸。 ~~~css div { border-image-source: url(./circle.png); border-image-slice: 33%; } ~~~ :-:  &emsp;&emsp;border-image-slice屬性還能接收一個fill關鍵字（如下圖所示），可將編號為9的圓作為div元素的背景圖。 ~~~css div { border-image-slice: 33% fill; } ~~~ :-:  &emsp;&emsp;第三個是border-image-repeat屬性，它能指定填充邊框的方式，默認是拉伸，現在改成平鋪（如下圖所示），邊界處的圖像可能會被裁剪。 ~~~css div { border-image-repeat: repeat; } ~~~ :-:  &emsp;&emsp;第四個是border-image-width屬性，與border-image-slice屬性類似，也有4條裁剪線，只是它裁剪的對象是邊框。在下圖中，左邊是未定義border-image-width屬性的div元素，右邊是將該屬性設為20px后的效果。 ~~~css div { border-image-width: 20px; } ~~~ :-:  &emsp;&emsp;第五個是border-image-outset屬性，可聲明圖像超出邊框的距離，即向外偏移。在下圖中，左邊是未定義border-image-outset屬性的div元素，右邊是將該屬性設為10px后的效果。 ~~~css div { border-image-outset: 10px; } ~~~ :-:  &emsp;&emsp;第六個是border-image屬性，可將上述5個屬性整合到一起，規定不同的值之間用斜杠（/）分隔，并且還指定了順序：首先是border-image-slice，然后是border-image-width，最后是border-image-outset。而border-image-source和border-image-repeat兩個屬性可放在任意位置，但要注意，不能放置在其它屬性值之中。下面是個整合示例，效果如下圖所示。 ~~~css div { border-image: url(./circle.png) 33% / 20px / 10px repeat; } ~~~ :-:  ## 三、字符間距 &emsp;&emsp;letter-spacing屬性可定義字符之間的距離，可以突出某段文本，例如為p元素定義10px的字符間距，如下圖所示。? ~~~html <style> p { letter-spacing: 10px; } </style> <p>字符間距是10px</p> ~~~ :-:  ## 四、文本陰影 &emsp;&emsp;text-shadow屬性可為文本添加陰影，適用于標題或短文本。陰影值由四部分組成，分別是顏色、橫向偏移、縱向偏移和模糊半徑。下面的示例為一段文本添加了灰色的陰影，效果如下圖所示。 ~~~html <style> p { text-shadow: #CCC 5px 10px 2px; } </style> <p>My name is Strick.</p> ~~~ :-:  &emsp;&emsp;注意，模糊半徑越大，陰影就越模糊。妥善利用好text-shadow屬性，還能創造出3D效果，下面的樣式來源于網絡，字體放大后，3D更明顯，效果如下圖所示。 ~~~css 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; } ~~~ :-:  ## 五、多重背景 &emsp;&emsp;CSS3支持多重背景，大部分背景屬性都能通過逗號分隔多個值，包括簡寫的background屬性也能接受多個值。在下面的示例中，為div元素聲明了兩個背景，先聲明的star.png將會在lake.png之上，如下圖所示。 ~~~css 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; } ~~~ :-:  &emsp;&emsp;注意，不能為background-color指定多個值。當用background屬性聲明多個背景時，顏色只能出現在最后一個背景層中，如下代碼所示。 ~~~css /* 錯誤 */ 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; } ~~~ ## 六、矩陣函數 &emsp;&emsp;在CSS中，矩陣函數是變形的基礎，位移、縮放、傾斜和旋轉四種變形都能用矩陣來實現，例如用矩陣函數來描述水平偏移10px，垂直偏移5px，代碼如下所示。 ~~~css .matrix { transform: matrix(1, 0, 0, 1, 10, 5); /* 等同于 */ transform: translate(10px, 5px); } ~~~ &emsp;&emsp;現在將矩陣函數的6個參數用小寫字母來命名，如下所示。 ~~~css transform: matrix(a, b, c, d, e, f); ~~~ &emsp;&emsp;對應的矩陣如下所示，注意觀察6個參數的位置。 :-:  &emsp;&emsp;矩陣函數的原理是通過變更元素的所有坐標，重新定位元素，從而實現各種變形。下面是矩陣的計算公式，其中x和y是元素的橫坐標和縱坐標。 :-:  &emsp;&emsp;ax+cy+e是變形后的橫坐標，bx+dy+f是變形后的縱坐標。具體的計算過程如下所示，以矩陣的第一行為例，相同底色的變量會相乘，得到的積再相加。 :-:  &emsp;&emsp;在下圖中，列出了與四類變形函數等效的矩陣符號（引用自《[The CSS3 matrix() Transform for the Mathematically Challenged](https://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/)》一文），其中旋轉和傾斜還用到了三角函數。 :-:  &emsp;&emsp;在三維空間，也有一個對應的矩陣函數：matrix3d()，此處不再展開敘述，可以查看網上的相關資料。 ## 七、三維變形 &emsp;&emsp;在三維空間中有三個軸，如下圖所示，其中Z軸表示用戶與平面的距離（即透視值）。 :-:  &emsp;&emsp;perspective()是一個透視函數，它能接收一個非零正數透視值。在下面的示例中，會讓四個元素圍繞Y軸旋轉30°，除了第一個元素，其它都調用了透視函數。通過下圖的效果可知，當透視值越小時，變形效果越失真。 ~~~css .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); } ~~~ :-:  &emsp;&emsp;注意，透視函數需要聲明在變形函數列表的首位，以免在透視前變形，呈現錯誤的效果。 &emsp;&emsp;除了perspective()函數之外，CSS3還提供了一個perspective屬性。前者只能為目標元素聲明透視，而后者聲明的透視能應用于其子元素。舉個簡單的例子，為父元素section聲明perspective屬性，子元素仍舊圍繞Y軸旋轉30°，代碼如下所示，得到的效果如下圖所示。 ~~~html <style> .perspective { perspective: 200px; } .perspective > div { transform: rotateY(30deg); } </style> <section class="perspective"> <div>200px</div> <div>200px</div> </section> ~~~ :-:  &emsp;&emsp;perspective-origin屬性可修改透視原點，也叫消失點，其取值與transform-origin類似。默認情況下，這個點位于元素的中心，接下來修改上例父元素的透視原點，樣式如下，效果如下圖所示。 ~~~css .perspective { perspective-origin: top left; } ~~~ :-:  &emsp;&emsp;backface-visibility屬性可控制元素背面朝向用戶時是否渲染，利用該屬性可設計出3D翻轉的特效。接下來會一步步的實現該功能，首先是創建HTML結構，如下所示，section是兩個div的父元素。 ~~~html <section class="flip"> <div class="positive">正面</div> <div class="reverse">反面</div> </section> ~~~ &emsp;&emsp;然后在父元素中添加過渡時間和透視，并將transform-style屬性設為preserve-3d，這樣才能讓子元素和父元素處于同一個三維空間，樣式如下。 ~~~css .flip { position: relative; width: 100px; height: 100px; transition: 0.6s; transform-style: preserve-3d; perspective: 1000px; } ~~~ &emsp;&emsp;再將兩個子元素的backface-visibility屬性設為hidden，并且將第二個div元素圍繞Y軸旋轉180°，樣式如下。 ~~~css .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); } ~~~ &emsp;&emsp;最后為父元素定義:hover偽類，也就是在鼠標懸停時，自身也圍繞Y軸旋轉180°，隱藏第一個div元素，顯示第二個div元素，樣式如下。 ~~~css .flip:hover { transform: rotateY(180deg); } ~~~ &emsp;&emsp;由于是動態的效果，因此需要用多張圖來描繪翻轉的過程，如下圖所示。 :-:  ***** > 原文出處： [博客園-CSS躬行記](https://www.cnblogs.com/strick/category/1667864.html) [知乎專欄-CSS躬行記](https://zhuanlan.zhihu.com/pwcss) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。