CSS border-image-repeat | CSS プロパティ値| 意味使い方実例

ページコンテンツ

`border-image-repeat` CSS プロパティとは

トピック：境界線のサイズに一致するように、境界線イメージの中間部分がどのように拡大縮小またはタイルされるかを指定する事ができる

 #webref{
     border-image-source: url("../webref.jpg");
     border-image-repeat: repeat;
}

デフォルト値・初期値 :	`stretch`
適用対象 :	全要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用される
継承 :	不可
メディア :	visual
計算値 :	指定値
`CSS Version`	`CSS3`
アニメーションの種類 :	個別
JavaScript 構文	object.style.borderImageRepeat="round"
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`border-image-repeat: stretch \|repeat \|round \|initial \|inherit;`

border-image-repeat

値	説明
`stretch`	デフォルト値。画像は、その領域を埋めるように引き伸ばされる
`repeat`	画像はタイル張り（繰り返し）され、領域を埋める
`round`	画像は、領域を埋めるためにタイル張り（繰り返し）されます。タイルの全数で領域を塗りつぶしていない場合、イメージは再スケーリングされてフィットします
`space`	画像は、領域を埋めるためにタイル張り（繰り返し）されます。タイルの全数で領域を埋めるのでなければ、余分なスペースはタイルの周りに分散されます
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

サポートするデスクトップブラウザ対応・互換性

Property	Desktop 互換性
border-image-repeat	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯15	フルサポート◯12	フルサポート◯15	フルサポート◯11	フルサポート◯15	フルサポート◯6
`round`	フルサポート◯30	フルサポート◯12	フルサポート◯15	フルサポート◯11	不明	フルサポート◯9.1
`space`	フルサポート◯56	フルサポート◯12	フルサポート◯50	フルサポート◯11	サポートなし✖	フルサポート◯9.1

：border-image-repeat 関連記事