CSS3ボーダー画像
CSS3でborder-imageプロパティは、要素の周囲に境界線として使用する画像を設定することができます。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-webkit-, -moz- 、または-o-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-imageのプロパティ
CSS3 border-imageプロパティを使用すると、代わりに要素の周りに通常のボーダーを使用する画像を指定することができます。
プロパティは、3つの部分があります。
- ボーダーとして使用する画像
- どこに画像をスライスします
- 真ん中のセクションでは、反復または引き伸ばさする必要があるかどうかを定義します
我々は、（「/css/border.png」と呼ばれる）は、次の画像を使用します。
border-imageプロパティは、画像を取り、三目並べのボードのように、9つのセクションにそれをスライス。 その後、隅にコーナーを配置し、中央のセクションを繰り返したり、指定したとして引き伸ばされます。
注：のためにborder-image動作するように、要素は必要borderプロパティセットを！
ここでは、画像の真ん中のセクションでは、境界線を作成するために繰り返されています。
ボーダーとしてのイメージ！
ここでは、コードは次のとおりです。
例
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
»それを自分で試してみてください ここでは、画像の真ん中のセクションでは、境界線を作成するために引き伸ばされています。
ボーダーとしてのイメージ！
ここでは、コードは次のとおりです。
例
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
»それを自分で試してみてください  | ヒント： border-imageプロパティは、実際の短縮形プロパティであるborder-image-source 、 border-image-slice 、 border-image-width 、 border-image-outsetとborder-image-repeatプロパティ。 |
|---|
CSS3のborder-画像 - 別のスライス値
異なるスライス値は、完全に境界線の外観を変更します。
実施例1：
border-image: url(border.png) 50ラウンド。
例2：
border-image: url(border.png) 20％ラウンド。
例3：
border-image: url(border.png) 30％ラウンド。
ここでは、コードは次のとおりです。
例
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} »それを自分で試してみてください 練習で自分自身をテスト！
CSS3ボーダーのプロパティ
| プロパティ | 説明 |
|---|---|
| border-image | すべての設定のための簡略記述特性border-image-*プロパティを |
| border-image-source | 境界として使用する画像へのパスを指定します |
| border-image-slice | 境界画像をスライスする方法を指定します |
| border-image-width | 境界画像の幅を指定します。 |
| border-image-outset | 境界画像領域が境界ボックスを越えて延びている量を指定します。 |
| border-image-repeat | 境界画像は、繰り返し丸めたり伸ばしするかどうかを指定します |