CSSボーダー画像
CSSボーダー画像
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 | 境界線の画像を繰り返すか、丸めるか、伸ばすかを指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。