CSSborder -image-repeatプロパティ
例
境界線の画像を繰り返す方法を指定します。
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
定義と使用法
このborder-image-repeat
プロパティは、境界線の画像を繰り返すか、丸めるか、間隔を空けるか、引き伸ばすかを指定します。
ヒント:border-imageプロパティ(すべてのborder- image- *プロパティを設定するための省略形プロパティ)も確認してください。
デフォルト値: | ストレッチ |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.borderImageRepeat = "round" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS構文
border-image-repeat: stretch|repeat|round|space|initial|inherit;
注:このプロパティは、境界線画像の側面と中央部分の画像をどのように拡大縮小および並べて表示するかを指定します。したがって、ここで2つの値を指定できます。2番目の値を省略すると、最初の値と同じであると見なされます。
プロパティ値
Value | Description | Play it |
---|---|---|
stretch | Default value. The image is stretched to fill the area | |
repeat | The image is tiled (repeated) to fill the area | |
round | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits | |
space | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSSボーダー画像
CSSリファレンス:border-imageプロパティ
CSSリファレンス:border-image-outsetプロパティ
CSSリファレンス:border-image-sliceプロパティ
CSSリファレンス:border-image-sourceプロパティ
CSSリファレンス:border-image-widthプロパティ
HTML DOMリファレンス:borderImageRepeatプロパティ