CSS の border-image-repeat
プロパティは、元画像の辺の領域を、どうやって要素の境界画像に合うように合わせるかを定義します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
/* キーワード値 */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* 垂直 | 水平 */
border-image-repeat: round stretch;
/* グローバル値 */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;
border-image-repeat
プロパティは、下記の値のリストにある1つ又は2つの値を使用して指定することができます。
- 値が1つ指定された場合、全4辺に同じ動作が適用されます。
- 値が2つ指定された場合、1つ目の動作が上下に、2つ目が左右に適用されます。
値
stretch
- 2つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。
repeat
- 2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。
round
- 2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。
space
- 2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。
形式文法
例
CSS コンテンツ
#bordered {
width: 12rem;
margin-bottom: 1rem;
padding: 1rem;
border: 40px solid;
border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
border-image-repeat: stretch; /* live sample で変更可能 */
}
HTML
JavaScript
仕様策定状況
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Backgrounds and Borders Module Level 3 border-image-repeat の定義 |
勧告候補 | 初回定義 |
初期値 | stretch |
---|---|
適用対象 | すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。