CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 border-image-repeat 属性 CSS3 border-image 属性

CSS3 border-image-outset属性の使用方法と例

このborder-image-outsetCSS属性は、境界画像エリアがボックスの境界を超えた量を指定します。

このテーブルは、この属性の使用方法とバージョンハイストリと、javascriptスクリプト内での属性の使用法を示しています。

デフォルト値：	0
適用可能：	この属性はどの要素にも適用できますが、テーブル要素（例えば tr,th,td ）のborder-collapse属性の値がcollapseの場合のborder-image-outset属性は無効です。これも::first-letter。
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript構文：	object.style.borderImageOutset="20 20"

border-image-outsetの使用構文

この属性の構文は以下の通りです：

　border-image-outset: length | number | initial | inherit

以下の例では、border-image-outset属性。

例

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　border-image-source: url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-outset:　15px;
}

試してみる‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
length	境界画像が境界ボックスを超える絶対距離または相対単位の距離を指定します。負の値の使用は許可されていません。
number	境界幅または境界ボックスの幅を示しますborder-widthの値の倍数。負の値の使用は許可されていません。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のborderを使用します-image-outset属性の値。

ブラウザの互換性

border-image-outset属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

さらに詳しく

以下のチュートリアルを参照してください：CSS3 BorderおよびCSS Border。

CSS3 border-image-repeat 属性 CSS3 border-image 属性