例
要素の境界エッジ外側の10ピクセル境界画像を配置します。
#borderimg
{
border-image-source: url(border.png);
border-image-outset: 10px;
}
定義と使用法
ボーダー像冒頭プロパティは、境界画像領域が境界ボックスを越えて延びている量を指定します。
ヒント：また見ボーダー画像プロパティ(a shorthand property for setting all the border-image-* properties) 。
| デフォルト値： | 0 |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.borderImageOutset="10px" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-image-outset | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSSの構文
border-image-outset:length|number|initial|inherit;Note:境界線像冒頭プロパティは、1から4の値に取ることができます(top, right, bottom, and left sides) 。 第四の値が省略された場合、それは第二と同じです。 第三の一方が省略されている場合は、最初と同じです。 第二のものが省略されている場合は、最初と同じです。
プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| length | ボーダー-画像が表示されますどのくらいのエッジから指定長さの単位。 デフォルト値は0です | それを再生します» |
| number | 対応する境界線幅の倍数を表します | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSS3のチュートリアル： CSS3ボーダー画像
CSSリファレンス： border-image property
CSSリファレンス： border-image-repeat property
CSSリファレンス： border-image-slice property
CSSリファレンス： border-image-source property
CSSリファレンス： border-image-width property
HTML DOMリファレンス： borderImageOutset property