概要

【mask-border-slice】プロパティは、CSSでマスクボーダーを扱う際に、マスクイメージをどのように分割するかを指定するためのプロパティです。これは、ボーダーの各領域に適用されるイメージの部分を定義し、マスク効果を適用する際に非常に便利です。

構文

mask-border-slice: <number> | <percentage> {1,4};

パラメータ

• <number>
  マスクボーダーを分割する値を数値で指定します。ピクセル単位の数値です。
• <percentage>
  マスクボーダーを分割する値をパーセンテージで指定します。 値は1〜4つの数値を指定でき、それぞれが上、右、下、左の順に適用されます。値が1つの場合はすべての辺に適用され、2つの場合は縦と横に、3つの場合は上、横、下の順に適用され、4つで個別に適用されます。

戻り値

【mask-border-slice】は分割された各領域がどの部分をマスクするかを決定します。これにより、デザインの柔軟性が向上し、クリエイティブなボーダー効果を得ることができます。

説明

【mask-border-slice】は、通常の【border-image-slice】と似た動作をしますが、画像をマスクとして使用するのが特徴です。指定した数値やパーセンテージに従い、マスクボーダーイメージを分割し、それをボーダーの上下左右に適用します。

主な特徴

• マスク用のイメージの分割を調整して、異なる領域に異なる効果を適用できます。
• 複雑なボーダーエフェクトを実現し、要素の外枠をユニークなスタイルにできます。

使用例

基本的な使用例

以下の例では、【mask-border-slice】を使ってマスクボーダーイメージを四方向に均等に分割しています。

.element {
  mask-border-source: url('border-image.png');
  mask-border-slice: 30; /* 30pxずつ分割 */
  mask-border-width: 10px;
  mask-border-repeat: stretch;
}

この例では、マスクイメージを上下左右それぞれ30pxで分割し、それぞれの領域がボーダーの一部として機能します。

異なる値を指定する例

4つの値を使用して、各辺ごとに異なる分割を行うこともできます。

.element {
  mask-border-source: url('mask-image.png');
  mask-border-slice: 10 20 30 40; /* 上10px、右20px、下30px、左40pxで分割 */
  mask-border-width: 15px;
  mask-border-outset: 5px;
  mask-border-repeat: round;
}

この例では、マスクボーダーイメージをそれぞれの辺で異なるピクセル数で分割し、各辺ごとに異なる効果を作り出しています。

パーセンテージでの分割

パーセンテージを使うことで、ボーダーイメージ全体のサイズに対して相対的に分割することも可能です。

.element {
  mask-border-source: url('mask-image.png');
  mask-border-slice: 25%; /* 画像全体の25%ずつを分割 */
  mask-border-width: 20px;
}

この設定では、マスクイメージ全体の25%を基準に分割され、ボーダーの各辺に適用されます。

注意点

• マスクボーダーイメージは【mask-border-source】プロパティで指定する必要があります。指定がない場合はマスクボーダーが適用されません。
• 【mask-border-width】プロパティと組み合わせて使うことが一般的で、ボーダーの幅や適用されるイメージのサイズを調整します。
• 【mask-border-repeat】の設定によって、分割されたイメージの繰り返し方法（stretch, repeat, round, space）が変わり、デザインの仕上がりが大きく変わります。

まとめ

【mask-border-slice】プロパティは、クリエイティブなマスクボーダーデザインを実現するための非常に強力なツールです。画像を分割して適用することで、ボーダーに独自のスタイルを簡単に付加できます。指定する数値やパーセンテージに応じて、ボーダーの見え方が大きく変わるため、目的に合わせて柔軟に調整してください。