border-image-sliceプロパティ

値

今回は次の画像をボーダーに適用することとして、何パターンか指定するコードを書いていきます。

ボーダーで使用するサンプル画像。縦横100px。

パターン1

値が1つの場合、全ての辺に同じ値を適用します。

次の例では全ての辺が太さ20pxのボーダーに対し、「20%」を適用しています。値に「%」をつけなかった場合も、標準で「%」単位での指定になります。

CSSコード例

border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-sample.png);
border-image-slice: 20%;

表示例：

パターン2

値が2つの場合、1つ目は上下の辺に、2つ目は左右の辺に適用されます。上下、または左右の辺は合計100%未満で指定する必要があるため、「50% 50%」など合計100%以上で指定した場合は画像が途中で切れてしまいます。

次の例では、全ての辺が太さ20pxのボーダーに対し、上下の辺に画像の高さ20%、左右の辺に画像の幅50%で分割を行って表示しています。左右は合計で100%を超えてしまっているため、途中で切れて表示されています。

CSSコード例

border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-sample.png);
border-image-slice: 20% 50%;

表示例：

パターン3

値が3つの場合、1つ目の値は上の辺に適用され、2つ目の値は左右の辺に適用され、3つ目の値は下の辺に適用されます。

次の例では、全ての辺が太さ40pxのボーダーに対し、上辺に20%、左右辺に30%、下辺に40%の画像分割を行って表示しています。

CSSコード例

border-width: 40px;
border-style: dashed;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-sample.png);
border-image-slice: 20% 30% 40%;

表示例：

パターン4

値を4つの指定した場合、1つ目の値は上辺に適用、2つ目の値は右辺に適用、3つ目の値は下辺に適用、4つ目の値は下辺に適用されます。

次の例では、全ての辺が太さ20pxのボーダーに対し、上辺に20%、右辺に10%、下辺に60%、左辺に85%の画像分割を行って表示しています。

CSSコード例

border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-sample.png);
border-image-slice: 20% 10% 60% 85%;

表示例：