概要

CSSのmask-border-outsetプロパティは、マスクボーダーが要素の外側にどれだけ広がるか（アウトセット）を設定するためのプロパティです。このプロパティを使うことで、マスクボーダーの外側にどれだけ広がるかを制御し、要素のビジュアルエフェクトを細かく調整することができます。マスクボーダーは、ボーダーの装飾効果を高めるために使用され、アウトセットを設定することで、デザインの意図に合わせた効果的な見せ方を実現できます。

mask-border-outsetの基本構文

selector {
  mask-border-outset: value;
}
  • value
    マスクボーダーのアウトセットの幅を指定します。値には数値（px, emなど）、パーセンテージ（%）、または複数の値を指定して、各方向のアウトセットを調整できます。

例

  • mask-border-outset: 10px;
    マスクボーダーをすべての方向に10pxアウトセットします。

  • mask-border-outset: 5px 10px;
    垂直方向に5px、水平方向に10pxのアウトセットを設定します。

使用例

基本的な使用例 - マスクボーダーのアウトセットを設定する

以下の例では、mask-border-outsetを使用して、マスクボーダーのアウトセットを設定しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>mask-border-outsetの使用例</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        mask-border-source: url("mask-image.png"); /* マスクボーダーのソース画像を指定 */
        mask-border-slice: 30; /* ボーダーのスライス設定 */
        mask-border-width: 20px; /* ボーダーの幅 */
        mask-border-outset: 15px; /* ボーダーを要素の外側に15px広げる */
        mask-border-repeat: stretch; /* 画像を引き伸ばして適用 */
        background-color: #4682b4; /* 背景色 */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

解説

  • mask-border-source: url('mask-image.png');
    マスクボーダーの画像ソースを指定します。
  • mask-border-slice: 30;
    画像の30%をスライスしてマスクボーダーとして使用します。
  • mask-border-outset: 15px;
    マスクボーダーを要素の外側に15px広げています。この設定により、ボーダーが要素の外側に広がり、強調された見た目を実現します。

応用例 - 複数の方向に異なるアウトセットを設定する

mask-border-outsetでは、各方向ごとに異なるアウトセットを指定することが可能です。以下の例では、上下と左右で異なるアウトセットを設定しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>異なる方向のmask-border-outset設定</title>
    <style>
      .box {
        width: 250px;
        height: 250px;
        mask-border-source: url("mask-image.png"); /* マスクボーダーの画像を指定 */
        mask-border-slice: 20; /* 画像の20%をスライス */
        mask-border-width: 15px; /* ボーダーの幅 */
        mask-border-outset: 10px 25px; /* 上下に10px、左右に25pxのアウトセットを設定 */
        mask-border-repeat: round; /* 画像を繰り返して適用 */
        background-color: #ff6347; /* 背景色 */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

解説

  • mask-border-outset: 10px 25px;
    上下方向に10px、左右方向に25pxのアウトセットを設定しています。これにより、マスクボーダーが各方向で異なる幅で広がり、デザインに奥行きを加えます。
  • mask-border-repeat: round;
    画像を繰り返してボーダー全体に適用します。マスクのデザインに応じて繰り返し設定を調整することが可能です。

mask-border-outsetの注意点

  • 他のボーダー関連プロパティとの調整
    mask-border-outsetの設定によって、マスクボーダーの見た目が変わるため、mask-border-widthやmask-border-sliceといった他のプロパティとのバランスを考慮することが重要です。設定が不適切だと、意図しないデザインになることがあります。
  • ブラウザサポート
    mask-border-outsetは比較的新しいプロパティであり、全てのブラウザでサポートされているわけではありません。特に古いブラウザでは機能しない場合があるため、使用前にターゲットブラウザの互換性を確認する必要があります。
  • パフォーマンスへの影響
    複雑なマスクボーダーの設定は、レンダリングパフォーマンスに影響を与える可能性があります。特に大きな画像や高解像度のマスクを使用する場合は、パフォーマンスの影響を考慮してデザインを調整しましょう。

まとめ

mask-border-outsetプロパティは、マスクボーダーの広がりを制御することで、ボーダーのデザインに柔軟性を持たせることができます。各方向のアウトセットを個別に調整することで、デザインの表現力が高まり、よりインパクトのある見た目を実現できます。ただし、他のボーダー関連の設定やブラウザサポートを考慮しながら使用することが重要です。適切に活用することで、独自のデザイン表現を可能にする強力なツールとなります。

参照:

`CSS` mask-border-outset property - MDN Web Docs