CSS躬行記（8）——裁剪和遮罩

• 2020 年 4 月 30 日
• 筆記
• CSS躬行記

一、 裁剪

　　裁剪（clipping）能讓元素顯示指定形狀的區域，在布局時可起點綴的作用，豐富了視覺呈現。注意，裁剪本質上只是讓元素的部分區域透明，由此可知，裁剪完後元素所佔的空間仍舊會保留。裁剪最早是在CSS 2.1時代由clip屬性引入，但該屬性只能應用於絕對定位的元素，並且只能裁剪成矩形。CSS3提供了強大的clip-path屬性，突破了clip屬性的眾多限制，接下來將圍繞clip-path屬性展開講解。

1）裁剪形狀

　　clip-path屬性可以使用四種裁剪函數：circle()、ellipse()、inset()和polygon()，它們的作用和浮動形狀中的shape-outside屬性中的形狀函數相同。

　　下面用一個例子來演示這四個函數的效果，將它們分別應用到四個div元素中，樣式如下，得到的形狀如下圖所示。

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）裁剪盒子

　　裁剪盒子可指定形狀的邊界，其中margin-box、border-box、padding-box和content-box的作用與shape-outside屬性中的相同，並且這些關鍵字也能與裁剪函數組合使用，如下所示。在下圖中，左側是原圖，右側是使用了clip-path屬性後的效果。

div {
  width: 160px;
  height: 160px;
  padding: 20px;
  clip-path: content-box circle(50%);
}

　　還有三個關鍵字view-box、fill-box和stroke-box適用於SVG元素，具體用途可在網上查到相關資料。

3）裁剪路徑

　　對於複雜的形狀，可以採用SVG來創建裁剪路徑，實現自定義。引用方式和濾鏡中的一樣，也是使用url()函數，但指向的是SVG文件中的clipPath元素，下面的SVG文件源自MDN網站。

<svg height="0" width="0" xmlns="//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>

　　有兩種方式引用SVG文件中的形狀，第一種是外部引用，將SVG元素放在單獨的文件中；第二種是行內引用，將SVG元素放在當前的HTML結構中。下面用兩個CSS類來演示這兩種引用方式，其中url()函數接收的參數的最大區別就是是否包含文件路徑。

.url-cross {
  clip-path: url(./shapes.svg#cross);
}
.inline-cross {
  clip-path: url(#cross);
}

　　兩種方式的效果是相同的，都是將元素裁剪成四部分，如下圖所示。注意，外部引用的瀏覽器支持度比較糟糕，目前只有Firefox支持。

二、遮罩

1）蒙版

　　蒙版（masking）與裁剪類似，也是讓元素以某種形狀顯示，但蒙版能根據透明度和灰度值計算裁剪邊緣，並且有更多的蒙版屬性可供選擇，例如定位、尺寸、填充方式等。

　　下面用一個例子來演示蒙版的用法，首先創建HTML結構，包含三個div元素。

<div class="lake"></div>
<div class="star"></div>
<div class="lake star-mask"></div>

　　然後為三個div元素添加背景圖，並給第三個元素定義蒙版，樣式如下。注意，在Chrome瀏覽器中定義蒙版屬性時，需要額外添加-webkit-前綴，例如將原來的mask-image屬性改成-webkit-mask-image屬性。

.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;
}

　　在下圖中，將第二張五角星作為蒙版，作用到第一張風景照中，第三張是發生遮罩後的效果圖，可以看到五角星中不透明和半透明的區域會顯示風景照中的內容。

　　在.star-mask類中用到了mask-position，它的語法與background-position一樣，下表列出了所有的蒙版屬性和背景屬性之間的對應關係。

　　CSS還提供了一個簡寫屬性mask，可將上述屬性合併到該屬性中。關於蒙版還有一點需要注意，那就是遮罩用的蒙版圖像既可以是位圖圖像（png、jpg等），也可以是矢量圖形（指向SVG中的mask元素）。

2）替換元素的填充和定位

　　CSS3引入了兩個新屬性，用於遮罩替換元素。第一個是object-fit屬性，用來控制替換元素的內容以何種方式填充當前所使用的元素盒子，它有5個關鍵字可供選擇，如下所列，效果如下圖所示。

　　（1）fill：將元素盒子填充滿，它是object-fit屬性的默認值。

　　（2）contain：保持寬高比縮放，直到能將整塊內容填充進元素盒子為止。

　　（3）none：保持原有尺寸填充。

　　（4）cover：保持寬高比縮放，直到水平或垂直方向撐滿元素盒子為止。

　　（5）scale-down：作用與none或contain中的一個相同，取決於誰的尺寸更小。

　　第二個是object-position屬性，用來控制替換元素的內容在元素盒子中的位置，其語法和background-position相同。