mask-border-outsetでできること: 要素の形状をカスタマイズするテクニック

mask-border-outsetプロパティは、要素のマスク境界が境界ボックスからどの程度オフセットされるかを設定します。これは、要素の形状を定義するために使用されるマスク画像の領域を拡張または縮小するために使用されます。

文法

mask-border-outset: <length> | <number> [<length> | <number>] [<length> | <number>] [<length> | <number>]

4つの値が指定された場合、それぞれ上部、右、下、左のオフセットに適用されます。
3つの値が指定された場合、最初の値は上部のオフセットに、2番目の値は左右のオフセットに、3番目の値は下部のオフセットに適用されます。
2つの値が指定された場合、最初の値は上部と下部のオフセットに、2番目の値は左右のオフセットに適用されます。
1つの値が指定された場合、すべての辺に同じオフセットが適用されます。

初期値

0

適用範囲

すべての要素

継承

いいえ

アニメーション

個別

関連プロパティ

mask-border-width
mask-border-source
mask-border-slice
mask-border-repeat
mask-border-mode

使い方

mask-border-outsetプロパティを使用して、要素の形状を様々な方法でカスタマイズできます。例えば、以下のようなことができます。

異なる辺に異なるオフセットを設定して、非対称な形状を作成する
要素の境界を縮小して、マスク画像の一部のみを表示する
要素の境界を拡張して、マスク画像を要素からはみ出させる

以下の例は、要素の境界を10pxだけ拡張する方法を示しています。

div {
  mask-image: url('image.png');
  mask-border-outset: 10px;
}

以下の例は、上部と下部の境界を20px、左右の境界を10pxだけ拡張する方法を示しています。

div {
  mask-image: url('image.png');
  mask-border-outset: 20px 10px 20px 10px;
}

注意点

オフセット値が要素のサイズよりも大きい場合、マスク画像はクリップされます。
負の値は指定できません。
mask-border-outsetプロパティは、マスク画像が要素に対してどのように配置されるかを制御する他のプロパティと組み合わせて使用できます。

ブラウザのサポート

mask-border-outsetプロパティは、すべての主要なブラウザでサポートされています。

例 1：要素の境界を拡張する

この例では、円形のマスク画像を使用して、要素の境界を10pxだけ拡張します。

<div class="container">
  <img src="image.png" alt="Mask image">
</div>

.container {
  width: 200px;
  height: 200px;
  mask-image: url('mask.png');
  mask-border-outset: 10px;
}

例 2：要素の境界を縮小する

この例では、正方形のマスク画像を使用して、要素の境界を5pxだけ縮小します。

<div class="container">
  <img src="image.png" alt="Mask image">
</div>

.container {
  width: 200px;
  height: 200px;
  mask-image: url('mask.png');
  mask-border-outset: -5px;
}

例 3：異なる辺に異なるオフセットを設定する

この例では、マスク画像を使用して、要素の左側に10px、右側に20px、上部に30px、下部に40pxのオフセットを設定します。

<div class="container">
  <img src="image.png" alt="Mask image">
</div>

.container {
  width: 200px;
  height: 200px;
  mask-image: url('mask.png');
  mask-border-outset: 30px 20px 40px 10px;
}

この例では、マスク画像を使用して、要素の中央部分を切り抜きます。

<div class="container">
  <img src="image.png" alt="Mask image">
</div>

.container {
  width: 200px;
  height: 200px;
  mask-image: url('mask.png');
  mask-border-outset: 50% 50% 50% 50%;
}

これらの例はほんの一例であり、mask-border-outset プロパティを使用して作成できる様々な効果は無限大です。

mask-border-slice プロパティを使用して、マスク画像のどの部分が使用されるかを指定することもできます。
mask-border-repeat プロパティを使用して、マスク画像が要素内にどのように繰り返されるかを制御することもできます。
mask-border-width プロパティを使用して、マスク境界の幅を設定することもできます。

代替方法

偽要素と background-clip プロパティ
この方法は、擬似要素を使用してマスクを作成し、background-clip プロパティを使用して要素の境界ボックスの一部を切り抜くというものです。
```
<div class="container">
  <img src="image.png" alt="Mask image">
</div>
```
```
.container {
  position: relative;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url('mask.png');
  -webkit-mask-clip: border-box; /* Safari 9 以前のバージョン用 */
  mask-clip: border-box;
}
```
この方法は、比較的シンプルで、幅広いブラウザで動作します。しかし、mask-border-outset プロパティのように、マスク境界をオフセットすることはできません。
SVG マスク
この方法は、SVG 画像を使用してマスクを作成し、clip-path プロパティを使用して要素の形状を定義するというものです。
```
<div class="container">
  <img src="image.png" alt="Mask image">
</div>
```
```
.container {
  clip-path: url('mask.svg');
}
```
この方法は、より柔軟性が高く、複雑な形状のマスクを作成することができます。しかし、SVG 画像を作成する必要があり、すべてのブラウザで完全にはサポートされていません。
CSS グラデーションと background-size プロパティ
この方法は、CSS グラデーションを使用してマスクを作成し、background-size プロパティを使用して要素の境界ボックスの一部を切り抜くというものです。
```
<div class="container">
  <img src="image.png" alt="Mask image">
</div>
```
```
.container {
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #000 50%, #000 100%);
  background-size: 200% 100%;
}
```

どの代替方法を選択するべきか

どの代替方法を選択するかは、要件と使用するブラウザによって異なります。

コードがシンプルで、CSS グラデーションを使用できる方法は、CSS グラデーションと background-size プロパティ が適しています。
柔軟性が高く、複雑な形状のマスクを作成できる方法は、SVG マスク が適しています。
シンプルで幅広いブラウザで動作する方法は、偽要素と background-clip プロパティ が適しています。

上記以外にも、border-image プロパティや box-shadow プロパティを使用してマスクを作成する方法があります。これらの方法は、より高度なテクニックであり、すべての状況で適切とは限りません。

いずれの方法を選択する場合も、クロスブラウザ互換性をテストして、すべてのブラウザでマスクが正しく表示されることを確認することが重要です。