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

border-image-width”プロパティ:画像による境界線の太さCSS3で追加

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

プロパティについて

概要

初期値 border-image-width: 1;
適用対象 すべての要素(ただし、border-collapse: collapse;であるテーブル内部要素を除く)
継承 No
パーセント値 画像による境界線が描画される領域の横幅もしくは高さに依存
計算値 それぞれが数値、“auto”、もしくは算出された<length-percentage>”値である4個の値
アニメーション 計算値

border-image-width”プロパティは画像を用いた境界線の太さを指定するプロパティです。

既定では画像を用いた境界線はボーダー・ボックスの外縁の内側に沿って配置されます。“border-image-width”プロパティの値がborder-width”プロパティで指定された境界線の太さよりも大きい場合は画像による境界線はパディング・ボックスに向かってはみ出します。

画像による境界線

border-image-width”プロパティは要素のレイアウトには影響を与えません。ボーダー・ボックスの大きさを変更するにはborder-width”プロパティを使用します。

サンプルコード

div { border-image-width: 10px;}

説明
<length> pxemなどで画像による境界線の太さを指定
<percentage> 画像による境界線の描画領域の横幅もしくは高さを“100%”として画像による境界線の太さを指定 (画像による境界線の描画領域の横幅と高さは既定ではボーダー・ボックスの横幅と高さと一致しますが、border-image-outset”プロパティによって変更されます。)
<number> border-width”プロパティの値に対する倍率で画像による境界線の太さを指定
auto 境界線として使用される画像の断片の本来の横幅、もしくは高さで境界線を描画する (境界線用の画像がベクター画像である場合など、横幅と高さが定義されていない場合はborder-width”プロパティの値が使用されます。)
共通キーワード

値の指定方法

値が1つの場合は4つすべての辺の画像による境界線の太さとなります。

div { border-image-width: 〚画像による境界線の太さ〛;}

また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する辺が変わります。

  • 2つの場合は1つ目の値が上下、2つ目の値が左右の辺に適用されます。
  • 3つの場合は1つ目の値が上、2つ目の値が左右、3つ目の値が下の辺に適用されます。
  • 4つの場合は1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左の辺に適用されます。
border-image-width: 〚すべての辺〛;
border-image-width: 〚上下〛 〚左右〛;
border-image-width: 〚上〛 〚左右〛 〚下〛;
border-image-width: 〚上〛 〚右〛 〚下〛 〚左〛;

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border-image-width
定義なし

定義なし

定義あり

使用例

自動で画像による境界線の太さを決定する

div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: auto;
}
border-image-width: auto;

<length>”値で指定する

div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 10px;
}
border-image-width: 10px;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 20px;
}
border-image-width: 20px;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 30px;
}
border-image-width: 30px;

<percentage>”値で指定する

div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 10%;
}
border-image-width: 10%;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 25%;
}
border-image-width: 25%;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 50%;
}
border-image-width: 50%;

<number>”値で指定する

div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 0.5;
}
border-image-width: 0.5;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 1;
}
border-image-width: 1;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-width: 2;
}
border-image-width: 2;

それぞれの辺の画像による境界線の太さを指定する

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