このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-image:画像境界線CSS3で追加

記事Apr. 23rd,2021
画像を使用した境界線を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-image-source: none;
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;
適用対象 すべての要素(ただし、border-collapse: collapse;であるテーブル内部要素を除く)
継承 しない
パーセント値 一括指定が対象とする各プロパティの定義に依る
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

border-image”プロパティは境界線として使用する画像、太さ、配置方法などを指定する以下のプロパティの一括指定プロパティです。

画像境界線

border-image”プロパティによって指定された画像はborder-style”プロパティによって指定された境界線の代わりに表示されます。

サンプルコード

div { border-image: url(border-image_sample.png) 200 / 10px round;}

<'border-image-source'>”値<'border-image-slice'>”値<'border-image-width'>”値<'border-image-outset'>”値<'border-image-repeat'>”値を半角スペース(“ ”)で区切って1個ずつ指定できます。

<'border-image-width'>”値<'border-image-slice'>”値の後にスラッシュ(“/”)で区切って記述します。また、<'border-image-outset'>”値<'border-image-width'>”値の後にスラッシュ(“/”)で区切って記述します。

他の値を記述する順番は自由です。初期値のままで良い値は省略できます。

div { border-image: 〚“<'border-image-source'>”値〛 〚“<'border-image-slice'>”値〛 / 〚“<'border-image-width'>”値〛/〚“<'border-image-outset'>”値〛 〚“<'border-image-repeat'>”値〛;}

境界線用の画像

境界線として使用される画像は<'border-image-slice'>”値によって指定された4本の分割線で分割され、9つの断片に分けられます。これらの断片は境界線の4個の角、その間の4辺、その中の追加の背景としてそれぞれ使用されます。

画像境界線

角として使用される断片はそのままそれぞれが対応する角に配置されます。

辺として使用される断片は<'border-image-repeat'>”値によって指定された方法で、引き延ばされたり、繰り返されたりして4個の角の間に配置されます。

中央の断片は既定では破棄されて使用されませんが、<'border-image-slice'>”値に“fill”キーワードが含まれる場合は追加の背景として境界線の内側に描画されます。

中央の断片も<'border-image-repeat'>”値によって指定された方法で配置されます。

次項の使用例では以下の画像を境界線として使用しています。

境界線用画像のサンプル
サンプル画像の寸法

使用例

画像境界線を指定する

div {
border-style: solid;
border-width: 20px;
border-image: url(border-image_sample.png) 200 / 30px 20px / 10px 0 stretch round;
}
border-image: url(border-image_sample.png) 200 / 30px 20px / 10px 0 stretch round;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク