このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-image-repeat:画像境界線の繰り返しCSS3で追加

記事Apr. 22nd,2021
画像を用いた境界線の繰り返し方法を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-image-repeat: stretch;
適用対象 すべての要素(ただし、border-collapse: collapse;であるテーブル内部要素を除く)
継承 しない
パーセント値 パーセント値は指定できません
計算値 それぞれが各軸に対応する2個のキーワード
アニメーション 離散

border-image-repeat”プロパティは境界線の辺の部分と中央領域として使用される画像の断片を描画領域を覆うためにどのように繰り返すかを指定するプロパティです。

サンプルコード

div { border-image-repeat: round;}

説明
stretch 画像は領域を覆うために引き延ばされます
repeat 画像は表示領域全体を覆うのに必要な回数だけ繰り返されます (繰り返された画像が整数倍で収まりきらない場合、最初と最後の画像は一部が切り取られます。)
round 画像は表示領域全体を覆うのに必要な回数だけ繰り返されます (繰り返された画像が整数倍で収まりきらない場合、整数倍で収まるように拡大縮小されて表示されます。)
space 画像は表示領域全体を覆うのに必要な回数だけ繰り返されます (繰り返された画像が整数倍で収まりきらない場合、画像と画像の間に空白が入ります。 最初と最後の画像は表示領域の端に接します。)
共通キーワード

値の指定方法

値が1つの場合は4つすべての辺の画像境界線の繰り返し方法となります。

div { border-image-repeat: 〚画像境界線の繰り返し〛;}

また、2つの値を半角スペース(“ ”)で区切って記述する場合は1つ目の値が水平方向、2つ目の値が垂直方向の辺に適用されます。

border-image-repeat: 〚すべての辺〛;
border-image-repeat: 〚水平方向の繰り返し方法〛 〚垂直方向の繰り返し方法〛;

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border-image-repeat
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
stretch
定義なし

定義なし

定義あり
repeat
定義なし

定義なし

定義あり
round
定義なし

定義なし

定義あり
space
定義なし

定義なし

定義あり

使用例

画像境界線の繰り返し方法を指定する

div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200 fill;
border-image-repeat: stretch;
}
border-image-repeat: stretch;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200 fill;
border-image-repeat: repeat;
}
border-image-repeat: repeat;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200 fill;
border-image-repeat: round;
}
border-image-repeat: round;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200 fill;
border-image-repeat: space;
}
border-image-repeat: space;

水平方向と垂直方向の繰り返し方法をそれぞれ指定する

div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200 fill;
border-image-repeat: stretch space;
}
border-image-repeat: stretch space;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク