## 一、 裁剪 &emsp;&emsp;裁剪（clipping）能讓元素顯示指定形狀的區域，在布局時可起點綴的作用，豐富了視覺呈現。注意，裁剪本質上只是讓元素的部分區域透明，由此可知，裁剪完后元素所占的空間仍舊會保留。裁剪最早是在CSS 2.1時代由clip屬性引入，但該屬性只能應用于絕對定位的元素，并且只能裁剪成矩形。CSS3提供了強大的clip-path屬性，突破了clip屬性的眾多限制，接下來將圍繞clip-path屬性展開講解。 **1）裁剪形狀** &emsp;&emsp;clip-path屬性可以使用四種裁剪函數：circle()、ellipse()、inset()和polygon()，它們的作用和浮動形狀中的shape-outside屬性中的形狀函數相同。 &emsp;&emsp;下面用一個例子來演示這四個函數的效果，將它們分別應用到四個div元素中，樣式如下，得到的形狀如下圖所示。 ~~~css div { width: 200px; height: 200px; background: url(./lake.png); } .circle { clip-path: circle(50%); } .ellipse { clip-path: ellipse(50% 30%); } .inset { clip-path: inset(20px 10px); } .polygon { clip-path: polygon(0 0, 100px 0, 160px 200px, 0 200px); } ~~~ :-:  **2）裁剪盒子** &emsp;&emsp;裁剪盒子可指定形狀的邊界，其中margin-box、border-box、padding-box和content-box的作用與shape-outside屬性中的相同，并且這些關鍵字也能與裁剪函數組合使用，如下所示。在下圖中，左側是原圖，右側是使用了clip-path屬性后的效果。 ~~~css div { width: 160px; height: 160px; padding: 20px; clip-path: content-box circle(50%); } ~~~ :-:  &emsp;&emsp;還有三個關鍵字view-box、fill-box和stroke-box適用于SVG元素，具體用途可在網上查到相關資料。 **3）裁剪路徑** &emsp;&emsp;對于復雜的形狀，可以采用SVG來創建裁剪路徑，實現自定義。引用方式和濾鏡中的一樣，也是使用url()函數，但指向的是SVG文件中的clipPath元素，下面的SVG文件源自MDN網站。 ~~~html <svg height="0" width="0" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="cross"> <rect y="110" x="137" width="90" height="90" /> <rect x="0" y="110" width="90" height="90" /> <rect x="137" y="0" width="90" height="90" /> <rect x="0" y="0" width="90" height="90" /> </clipPath> </defs> </svg> ~~~ &emsp;&emsp;有兩種方式引用SVG文件中的形狀，第一種是外部引用，將SVG元素放在單獨的文件中；第二種是行內引用，將SVG元素放在當前的HTML結構中。下面用兩個CSS類來演示這兩種引用方式，其中url()函數接收的參數的最大區別就是是否包含文件路徑。 ~~~css .url-cross { clip-path: url(./shapes.svg#cross); } .inline-cross { clip-path: url(#cross); } ~~~ &emsp;&emsp;兩種方式的效果是相同的，都是將元素裁剪成四部分，如下圖所示。注意，外部引用的瀏覽器支持度比較糟糕，目前只有Firefox支持。 :-:  ## 二、遮罩 **1）蒙版** &emsp;&emsp;蒙版（masking）與裁剪類似，也是讓元素以某種形狀顯示，但蒙版能根據透明度和灰度值計算裁剪邊緣，并且有更多的蒙版屬性可供選擇，例如定位、尺寸、填充方式等。 &emsp;&emsp;下面用一個例子來演示蒙版的用法，首先創建HTML結構，包含三個div元素。 ~~~html <div class="lake"></div> <div class="star"></div> <div class="lake star-mask"></div> ~~~ &emsp;&emsp;然后為三個div元素添加背景圖，并給第三個元素定義蒙版，樣式如下。注意，在Chrome瀏覽器中定義蒙版屬性時，需要額外添加-webkit-前綴，例如將原來的mask-image屬性改成-webkit-mask-image屬性。 ~~~css .lake { background: url(./lake.png); } .star { background: url(./star-shadow.png); background-position: center; background-repeat: no-repeat; } .star-mask { mask-image: url(./star-shadow.png); mask-position: center; mask-repeat: no-repeat; } ~~~ &emsp;&emsp;在下圖中，將第二張五角星作為蒙版，作用到第一張風景照中，第三張是發生遮罩后的效果圖，可以看到五角星中不透明和半透明的區域會顯示風景照中的內容。 :-:  &emsp;&emsp;在.star-mask類中用到了mask-position，它的語法與background-position一樣，下表列出了所有的蒙版屬性和背景屬性之間的對應關系。 :-:  &emsp;&emsp;CSS還提供了一個簡寫屬性mask，可將上述屬性合并到該屬性中。關于蒙版還有一點需要注意，那就是遮罩用的蒙版圖像既可以是位圖圖像（png、jpg等），也可以是矢量圖形（指向SVG中的mask元素）。 **2）替換元素的填充和定位** &emsp;&emsp;CSS3引入了兩個新屬性，用于遮罩替換元素。第一個是object-fit屬性，用來控制替換元素的內容以何種方式填充當前所使用的元素盒子，它有5個關鍵字可供選擇，如下所列，效果如下圖所示。 &emsp;&emsp;（1）fill：將元素盒子填充滿，它是object-fit屬性的默認值。 &emsp;&emsp;（2）contain：保持寬高比縮放，直到能將整塊內容填充進元素盒子為止。 &emsp;&emsp;（3）none：保持原有尺寸填充。 &emsp;&emsp;（4）cover：保持寬高比縮放，直到水平或垂直方向撐滿元素盒子為止。 &emsp;&emsp;（5）scale-down：作用與none或contain中的一個相同，取決于誰的尺寸更小。 :-:  &emsp;&emsp;第二個是object-position屬性，用來控制替換元素的內容在元素盒子中的位置，其語法和background-position相同。 ***** > 原文出處： [博客園-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 等。