CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 border-画像-source 属性 CSS3 border-画像-repeat 属性

CSS3 border-画像-slice属性の使用方法と例

border-画像-slice CSS属性はborder-画像-source指定された画像を9の領域：4つの角、4つの辺、そして中央部分を指定して作成されます。4の内向きオフセット量を設定してこれを実現します。これらのオフセット量は通常、以下の3×3のグリッド。

境界画像の中央部分は削除され、境界自体で使用されませんが、background-画像fillキーワードが出现した場合、それを背景画像として使用します。

以下の表は、この属性の使用方法とバージョンハイストリと、javascriptスクリプト内での使用方法を示しています。

デフォルト値：	100%
適用範囲：	この属性は、どんな要素にも適用可能ですが、テーブル要素（例えばtr、th、td）のborder-collapse属性の値がcollapseの場合のborder-画像-slice属性は無効です。これも適用されます::first-letter。
継承：	ありません
アニメーション可能：	いいえ。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScript構文：	object.style.borderImageSlice="60% 60%"

border-画像-sliceの使用構文

この属性の構文は以下の通りです：

border-画像-slice:　[　number　|　percentage　]　1　まで　4　values　|　fill　|　initial　|　inherit

以下の例では、borderを使用する方法を示しています。-画像-slice属性。

例

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　border-画像-source:　url("border.png");
　　　　border-画像-slice:　30;
　　　　border-画像-repeat:　round;
}

試してみる‹/›

属性値

以下の表は、この属性の値を説明しています。

値	説明
number	レイキャスト画像の場合、画像の距離（ピクセル単位）、ベクトル画像の場合、ベクトル座標を示します。
percentage	画像のサイズに対して：水平偏移の画像幅、垂直偏移の画像高さ。
fill	存在する場合、画像の中央部分を保持します。そうでない場合、中央を透明として処理します。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のborderを使用します。-画像-slice属性の計算値。

ブラウザ互換性

border-画像-slice属性のブラウザの互換性を確認してください。下の表の数字は、この属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

さらに詳しく

以下のチュートリアルを参照してください：CSS3 BorderおよびCSS Border。

CSS3 border-画像-source 属性 CSS3 border-画像-repeat 属性