CSS3のborder-imageプロパティ
例
画像div要素の周囲に境界線として指定:
div要素
{
-webkit-ボーダー画像:のURL(border.png)30 30ラウンド; / *サファリ5 * /
-o-ボーダー画像:のURL(border.png)30 30ラウンド; / *オペラ* /
ボーダー画像:のURL(border.png)30 30ラウンド。
}
{
-webkit-ボーダー画像:のURL(border.png)30 30ラウンド; / *サファリ5 * /
-o-ボーダー画像:のURL(border.png)30 30ラウンド; / *オペラ* /
ボーダー画像:のURL(border.png)30 30ラウンド。
}
»をお試しください
より多くの例については、このページの下で。
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
プロパティ | |||||
---|---|---|---|---|---|
ボーダーイメージ | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -O- |
属性の定義と指示
ボーダー-imageプロパティを設定するために使用される簡略記述特性であるボーダー画像ソース 、 ボーダー、画像スライス 、 ボーダー画像幅 、 ボーダー像OUTSETとボーダー・画像・リピート値を。
そのデフォルト値に設定を省略。
ヒント:ボーダー-像通り*プロパティを使用して美しいスケーラブルなボタンを構築します!
デフォルト: | いずれも100%1 0ストレッチ |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.borderImage = "URL(border.png)30 30ラウンド" |
文法
border-image:source slice width outset repeat;
值 | 描述 |
---|---|
border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 图像边界向内偏移 |
border-image-width | 图像边界的宽度 |
border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮。 |
より多くの例
画像ボタン
この例では、国境-image属性ボタンを作成する方法を示します。
関連記事
CSS3のチュートリアル: CSS3ボーダー