Apr. 22nd,2021
プロパティについて
＃
概要
| 初期値 | “border-image-repeat: stretch;” |
| 適用対象 | すべての要素(ただし、“border-collapse: collapse;”であるテーブル内部要素を除く) |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | それぞれが各軸に対応する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: 〚水平方向の繰り返し方法〛 〚垂直方向の繰り返し方法〛;
＃
使用例
＃
画像による境界線の繰り返し方法を指定する
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;
＃
