drop img file here

参照...

 
上下左右の線
上の線
右の線
下の線
左の線


上下左右の幅
上の幅
右の幅
下の幅
左の幅

繰り返し方法

縦のリピート

横のリピート

Get Code

border-image

背景色  
文字色  

click to open

preview

Copy

X

コピーしました

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;

サンプルコードの結果

スポンサーリンク

スポンサーリンク

pagetop