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

border-image-outset:画像境界線の配置領域CSS3で追加

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

プロパティについて

概要

初期値 border-image-outset: 0;
適用対象 すべての要素(ただし、border-collapse: collapse;であるテーブル内部要素を除く)
継承 しない
パーセント値 パーセント値は指定できません
計算値 それぞれが数値、もしくは算出された絶対長の距離である4個の値
アニメーション 算出された値による

border-image-outset”プロパティは画像を用いた境界線の配置領域の大きさを指定するプロパティです。

画像境界線が描画される領域は既定ではボーダー・ボックスと一致しますが、“border-image-outset”プロパティで指定された幅だけその外側へ拡張されます。“border-image-outset”プロパティで拡張されたボーダー・ボックスの外側にある領域は空間を占有せず、要素のレイアウトには影響を与えません。拡張した幅によっては画像境界線が他の要素と重なったり、他の要素によって切り取られたりする場合があります。

画像境界線

サンプルコード

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

説明
<length> pxemなどで画像境界線の配置領域を拡張する幅を指定
<number> border-width”プロパティの値に対する倍率で画像境界線の配置領域を拡張する幅を指定
共通キーワード

値の指定方法

値が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: 〚上〛 〚右〛 〚下〛 〚左〛;

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
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;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク