Apr. 22nd,2021
プロパティについて
＃
概要
| 初期値 | “border-image-width: 1;” |
| 適用対象 | すべての要素(ただし、“border-collapse: collapse;”であるテーブル内部要素を除く) |
| 継承 | No |
| パーセント値 | 画像による境界線が描画される領域の横幅もしくは高さを“100%”とする |
| 計算値 | それぞれが数値、“auto”、もしくは算出された“<length-percentage>”値である4個の値 |
| アニメーション | 計算値 |
“border-image-width”プロパティは画像を用いた境界線の太さを指定するプロパティです。
既定では画像を用いた境界線はボーダー・ボックスの外縁の内側に沿って配置されます。“border-image-width”プロパティの値が“border-width”プロパティで指定された境界線の太さよりも大きい場合は画像による境界線はパディング・ボックスに向かってはみ出します。
“border-image-width”プロパティは要素のレイアウトには影響を与えません。ボーダー・ボックスの大きさを変更するには“border-width”プロパティを使用します。
サンプルコード
div { border-image-width: 10px;}
＃
値
| 値 | 説明 |
|---|---|
| <length> | “px”、“em”などで画像による境界線の太さを指定 |
| <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: 〚上〛 〚右〛 〚下〛 〚左〛;
＃
使用例
＃
＃
“<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;
