borderに画像を指定するborderに画像を指定する2017.01.15HTML・CSSCSS3borderに画像やグラデーションを指定できるborder-imageを使ってみます。spaceをサポートしていないブラウザなどがあるので注意が必要です。サンプルコードborder-imageは1枚の画像を9分割して、4つの角と辺に使用されます。今回は以下のようなサイズの画像を用意しました。実際の画像はこちらです。repeat;}border-imageのデモページborder-image-sourceボーダーに使用する画像やグラデーションを指定。border-image-sliceborder-image-sourceの切り分ける位置を指定。値は数値またはパーセント値で指定。4つの値を指定した場合はtop,right,bottom,leftに、3つの場合はtop,leftとright,bottomに、2つの場合はtopとbottom,leftとrightに、1つの場合は4つに同じ値が設定される。中央部分はfillを指定した場合のみ使用される。border-image-widthborder-imageの幅を指定。border-image-outsetborder-imageの領域を外側に広げる際に指定。border-image-repeatborder-imageの4辺の繰り返し方法を指定。領域のサイズに合わせて画像を引き延ばす。領域のサイズ内で画像を繰り返す。領域のサイズ内で画像を繰り返す。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整。border-imageプロパティでまとめて指定することもできます。border-image-repeatの値」の順番で指定します。コメントをキャンセルメールアドレスが公開されることはありません。cly7796.net。