Apr. 23rd,2021
プロパティについて
＃
概要
| 初期値 | “border-image-outset: 0;” |
| 適用対象 | すべての要素(ただし、“border-collapse: collapse;”であるテーブル内部要素を除く) |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | それぞれが数値、もしくは算出された絶対長である4個の値 |
| アニメーション | 計算値 |
“border-image-outset”プロパティは画像を用いた境界線の配置領域の大きさを指定するプロパティです。
画像による境界線が描画される領域は既定ではボーダー・ボックスと一致しますが、“border-image-outset”プロパティで指定された幅だけその外側へ拡張されます。“border-image-outset”プロパティで拡張されたボーダー・ボックスの外側にある領域は空間を占有せず、要素のレイアウトには影響を与えません。拡張した幅によっては画像による境界線が他の要素と重なったり、他の要素によって切り取られたりする場合があります。
サンプルコード
div { border-image-outset: 10px;}
＃
＃
値の指定方法
値が1つの場合は4方向すべての拡張幅となります。
div { border-image-outset: 〚配置領域の拡張幅〛;}
また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する方向が変わります。
- 2つの場合は1つ目の値が上下方向、2つ目の値が左右方向に適用されます。
- 3つの場合は1つ目の値が上方向、2つ目の値が左右方向、3つ目の値が下方向に適用されます。
- 4つの場合は1つ目の値が上方向、2つ目の値が右方向、3つ目の値が下方向、4つ目の値が左方向に適用されます。
border-image-outset: 〚すべての方向〛;
border-image-outset: 〚上下〛 〚左右〛;
border-image-outset: 〚上〛 〚左右〛 〚下〛;
border-image-outset: 〚上〛 〚右〛 〚下〛 〚左〛;
＃
使用例
＃
“<length>”値で指定する
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 10px;
}
border-image-outset: 10px;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 20px;
}
border-image-outset: 20px;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 30px;
}
border-image-outset: 30px;
＃
“<number>”値で指定する
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 0.5;
}
border-image-outset: 0.5;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 1;
}
border-image-outset: 1;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 2;
}
border-image-outset: 2;
＃
それぞれの方向の拡張幅を個別に指定する
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 5px 10px 15px 20px;
}
border-image-outset: 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-outset: 10px 2 30px;
}
border-image-outset: 10px 2 30px;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-outset: 2 30px;
}
border-image-outset: 2 30px;
