[css] border-imageプロパティ,枠線の模様を画像で描画

CSS3のborder-imageで、しましまの目立つ枠線を作る
執筆者：西村 文宏
CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。
しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。
実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。
border-imageプロパティの使い方を解説します。
border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引く方法
それでは、border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引いてみましょう。
以下の3手順で解説致します。
枠線として使いたい画像を用意する
CSSで、通常の枠線を引くよう記述する
CSSで、border-imageプロパティを使って、枠線の模様を画像にする
1. 枠線として使いたい画像を用意する
枠線に使うための画像
まずは、画像を用意します。ここでは例として、右図のように72×72ピクセルのサイズで用意しました。
どんな画像でも構いませんが、縦横とも「3で割り切れるピクセル数」で作っておく方が望ましいです。
詳しくは後述しますが、ここで用意した画像は、縦横3つ(合計9個)に分割された上で枠線に使われるためです。
なお、サンプルで利用した3種類の「しましま柄」の画像は、ご自由にダウンロードしてご活用頂けます(詳しくは後述)。
画像を自力で用意するのが面倒な場合は、それを使ってみて下さい。
2. CSSで、通常の枠線を引くよう記述する
続いて、スタイルシートを記述します。まずは、borderプロパティを使って「実線の枠線」を引くよう、以下のような感じで記述しておきます。
p {
   border: #ff8635 solid 10px;
   padding: 5px;
}
borderプロパティで作る普通の枠線
枠線に画像を指定できない古いブラウザでは、上記の指定だけが枠線の描画に使われます。
ですから、「枠線に使う画像」と似たような色を「枠線の色」として指定しておきましょう。
ここでは、右図のようにオレンジ色(#ff8635)を指定しました。
ここで指定した枠線の太さ(上記では「10px」)が、画像を使う場合でも枠線の太さになります。好きな値を指定して下さい。
なお、paddingは、「枠線」と「内容」との間の余白量です。ここでは「5px」と記述していますが、
好きな値を指定して下さい。省略しても構いません。
3. CSSで、border-imageプロパティを使って、枠線の模様を画像にする
先のスタイルシートに追加して、以下のようにborder-imageプロパティを記述します。
このborder-imageプロパティは、先のborderプロパティよりも後に記述して下さい。
p {
   border: #ff8635 solid 10px;
   padding: 5px;
   border-image: url("shimashima.png") 24 24 round;
}
border-imageプロパティを使って作った枠線
ここでは、枠線の画像として、「shimashima.png」というファイルを指定しています。
その結果、右図のように表示されます。
その後の2つの「24」は、画像の縦横ピクセル数を3分の1にした値を指定しておきます。
ここでは、縦横72pxの画像を使ったので、その3分の1である「24」を指定しています。
最後の「round」は、画像の繰り返し方法を指定しています。
ここでは、とりあえず「round」と記述して下さい。
記述できる種類と効果については、最後にご紹介致します。

All About
https://allabout.co.jp/gm/gc/441025/2/