CSS border-image
CSS border-image
CSSでborder-imageプロパティを使用すると、要素の周囲の境界線として使用する画像を設定できます。
CSS border-imageプロパティ
CSSborder-imageプロパティを使用すると、要素の周囲の通常の境界線の代わりに使用する画像を指定できます。
プロパティには3つの部分があります。
- ボーダーとして使用するイメージ
- 画像をスライスする場所
- 中間セクションを繰り返すか引き延ばすかを定義します
次の画像(「border.png」という名前)を使用します。
border-imageプロパティは画像を受け取り、三目並べのように9つのセクションにスライスします。次に、コーナーをコーナーに配置し、中央のセクションを指定どおりに繰り返すか引き延ばします。
注：border-imageが機能するには、要素にborderプロパティセットも必要です。
ここでは、境界線を作成するために画像の中央セクションが繰り返されます。
ボーダーとしてのイメージ！
コードは次のとおりです。
例
#borderimg{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
ここでは、画像の中央部分が引き伸ばされて境界線が作成されています。
ボーダーとしてのイメージ！
コードは次のとおりです。
例
#borderimg{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
ヒント：border-imageプロパティは、実際にはborder-image-source、border-image-slice、border-image-width、border-image-outsetとborder-image-repeatプロパティの短縮形プロパティです。
CSS border-image - 異なるスライス値
スライスの値が異なると、境界線の外観が完全に変わります。
例1
border-image: url(border.png) 50 round;
例2
border-image: url(border.png) 20% round;
例3
border-image: url(border.png) 30% round;
コードは次のとおりです。
例
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
CSS ボーダー画像のプロパティ
|
プロパティ |
説明 |
|---|---|
| border-image | すべての border-image-* プロパティを設定するための簡略プロパティ |
| border-image-source | 境界線として使用する画像へのパスを指定します |
| border-image-slice | ボーダーイメージのスライス方法を指定します |
| border-image-width | ボーダーイメージの幅を指定します。 |
| border-image-outset | ボーダーイメージ領域がボーダーボックスを超えてどれだけ拡張するかを指定します。 |
| border-image-repeat | ボーダーイメージを繰り返すか、丸めるか、伸ばすかを指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。