border-image
仕様
初期値 | |
---|---|
border-image-source | none |
border-image-slice | 100% |
border-image-width | 1 |
border-image-outset | 0 |
border-image-repeat | stretch |
適用対象 | すべての要素(border-collapseプロパティの値にcollapseが指定されたtable内要素を除く) |
値の継承 | しない |
設定できる値
スペース区切りで
<使用する画像> <使用範囲> <内側の背景> <繰り返し方法>
を指定する。
<使用範囲>の数値はまとめる事が可能、<内側の背景>は不要であれば省略可、<繰り返し方法>は縦横同じ指定であればまとめる事が可能。
border-image: | url(sample.png) | 5 10 15 20 | fill | round | stretch |
<使用する画像> | <使用範囲> | <内側の背景> | <繰り返し方法(横)> | <繰り返し方法(縦)> |
<上の線>
画像の上を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。
サンプルコード
border-image: url(sample.png) 60 30 30 30 round; border-width: 30px;
サンプルコードの結果
<右の線>
画像の右を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。
サンプルコード
border-image: url(sample.png) 30 60 30 30 round; border-width: 30px;
サンプルコードの結果
<下の線>
画像の下を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。
サンプルコード
border-image: url(sample.png) 30 30 60 30 Round; border-width: 30px;
サンプルコードの結果
<左の線>
画像の左を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。
サンプルコード
border-image: url(sample.png) 30 30 30 60 stretch; border-width: 30px;
サンプルコードの結果
<内側の背景>
中央部分も破棄されずに、画像が表示されます。
サンプルコード
border-image: url(sample.png) 30 30 30 30 fill stretch; border-width: 30px;
サンプルコードの結果
<繰り返し方法>
横の繰り返しと縦の繰り返しを指定します。同じ指定であればまとめることが可能。
サンプルコード
border-image: url(sample.png) 30 30 30 30 stretch repeat; border-width: 30px;
サンプルコードの結果