CSS 参考手冊

CSS @規則(RULES)

CSS 属性全書

CSS3 境界線-画像-slice 属性 CSS3 境界線-画像-outset 属性

CSS3 境界線-画像-repeat属性の使用方法と例

境界線-画像-repeat CSS属性は、边框图像の中央部分をスケーリングまたはタイルする方法を指定し、边框の大きさに一致させることを目的としています。

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプトでの使用シンタックスを示しています。

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

境界線-画像-repeatの使用方法

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

境界線-画像-repeat: [ stretch | repeat | round | space ]　1　または　2　values | initial | inherit

以下の例では、border-画像-repeat属性。

例

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

テストして見て‹/›

属性値

以下のテーブルにはこの属性の値を説明しています。

値	説明
stretch	画像は拡張され、境界線の端から端までのエリアを満たします。これはデフォルトの値です。
repeat	画像がタイル状に配置されたり繰り返されたりし、境界線の端から端までのエリアを満たします。
round	画像がタイル状に配置されたり繰り返されたりし、境界線の端から端までのエリアを満たします。このエリアが完全にタイルで埋まらない場合、画像は拡大され、縮小されます。
space	画像がタイル状に配置されたり繰り返されたりし、境界線の端から端までのエリアを満たします。このエリアが完全にタイルで埋まらない場合、余分なスペースはタイルの周りに均等に配分されます。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のborderを使用します。-画像-repeat属性の計算値。

ブラウザ互換性

境界線-画像-repeat属性のブラウザの互換性について、以下のテーブルにはその属性をサポートするブラウザの最低バージョン番号が示されています；すべての主要ブラウザがこの属性をサポートしています。

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

さらに詳しく

以下のチュートリアルを参照してください：CSS3境界線、CSS境界線。

CSS3 境界線-画像-slice 属性 CSS3 境界線-画像-outset 属性