CSS3 border-image プロパティ
 完全な CSS3 リファレンス
例
div 要素の周りのボーダーとしてイメージを指定します:
div
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;
} |
Try it yourself »
ページの下に他の例も記載しています。 |
ブラウザ・サポート
border-image プロパティは、Opera のみがサポートしています。
Firefox は、代替手段として -moz-border-image プロパティをサポートしています。
Safari と Chrome support は、代替手段として -webkit-border-image プロパティをサポートしています。
定義と用法
border-image プロパティは、
border-image-source、
border-image-slice、
border-image-width、
border-image-outset
および border-image-repeat プロパティを設定するためのショートハンド・プロパティです。
省略した値は、それぞれのデフォルト値が設定されます。
チップ: 美しいスケーラブルなボタンを構築するには、border-image-* プロパティを使用してください !
| デフォルト値: |
none 100% 1 0 stretch |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.borderImage="url(border.png) 30 30 round" |
構文
| border-image: source slice width outset repeat; |
 |
Try it Yourself - Examples |
Border-image ボタン
この例は、border-image プロパティによりボタンを作成する方法を示しています。
関連ページ
CSS3 チュートリアル: CSS3 Borders
完全な CSS3 リファレンス
|