CSS border-image-outset | CSS プロパティ値| 意味使い方実例

CSS border-image-outset| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-06-12 css-reference

ページコンテンツ

`border-image-outset` CSS プロパティとは

トピック：境界線イメージ領域が境界線ボックスを越えてはみ出す幅を指定することができる

 #webref{
     border-image-source: url("../webref.jpg");
     border-image-outset: 10px;
}

デフォルト値・初期値 :	0
適用対象 :	全要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用される
継承 :	不可
メディア :	visual
計算値 :	指定通り。ただし相対的 length は絶対的 length に変換
`CSS Version`	`CSS3`
アニメーションの種類 :	個別
JavaScript 構文	object.style.borderImageOutset="10px"
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`border-image-outset: length \|number \|initial \|inherit;`

値	説明
`length`	ボーダー画像境界のはみ出し量を指定する長さ単位。デフォルト値は0
`number`	対応するborder-widthの倍数を表す
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

border-image-outset プロパティは、1つから4つの値を使用して指定することができる。それぞれの値は <length> 又は <number> です。負の値は無効。
値が1つ指定された、場合、全4辺に同じはみ出し量が適用される。
値が2つ指定された、場合、1つ目のはみ出し量が上下に、2つ目が左右に適用される。
値が3つ指定された、場合、1つ目のはみ出し量が上に、2つ目が左右に、3つ目が下に適用される。
値が4つ指定された、場合、はみ出し量は上、右、下、左の順 (時計回り) で適用される。

：border-image-outset 関連記事