CSSボーダー画像
CSSボーダー画像
CSSborder-image
プロパティを使用すると、要素の周囲の境界線として使用する画像を設定できます。
CSSborder-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
CSSborder-image-異なるスライス値
スライス値が異なると、境界線の外観が完全に変わります。
例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;
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ボーダー画像のプロパティ
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |