css3 border-image_html/css_WEB-ITnoseの詳細説明-htmlチュートリアル-php.cn

css3 border-image_html/css_WEB-ITnoseの詳細説明

WBOY

リリース： 2016-06-21 09:03:54

オリジナル

1170 人が閲覧しました

border-image の概要

新しい属性 border-image が css3 に追加されました。この属性により、開発者は画像を使用して境界線を定義できるようになり、事前に定義されたいくつかの境界線が拡張されます。境界線のスタイル (境界線スタイル)。
border-image は省略形の属性であり、次の属性をそれぞれ設定します。

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

画像を境界線として使用できるのはなぜですか?

border-image の学習を始める前に質問があります。画像はコンテナの境界線にどのように適用されますか?

下の写真を見てください

簡単に言うと、写真の中央部分を削除して、次のような を形成します。ボーダーフレーム。

では、分割した8コマ素材を使ってボーダーを生成するにはどうすればよいでしょうか？

左上、右上、左下、下の4コマ素材右はそれぞれフレームの四隅として使用され、上下左右の4つのフレーム素材を異なる方法で展開してフレームの4辺を形成しています。上の図は、画像がどのように境界線を形成するかをよく示しています。

border-image-source

border-image-source 属性は、ボーダーに必要なマテリアルのパスを指定するために使用されます。構文については、背景画像を参照してください。
border-image-source 属性のみが設定され、他の属性がデフォルト値を使用する場合、ボーダーマテリアルは 9 つのグリッドに分割されず、マテリアル全体が次の条件に従って適切なサイズに拡大縮小されることに注意してください。枠線の幅を指定して枠線の四隅に配置します。

<!doctype html><html><head><meta charset="utf-8"><title>边框图片</title><style>#border_image {    width:100px;    height:100px;    border:15px solid #ccc;    border-image:url("http://img.mukewang.com/52e21fea000127e802100210.jpg");    background:#ccc;    }</style></head><body><div id="border_image"></div></body></html>

ログイン後にコピー

以下に示すように

border-image-slice

border-image-slice 属性ボーダー素材のカットサイズを設定するには、下図のように、上側の横カットライン、右の縦カットライン、下側の横カットライン、左の縦カットラインの順になります。値はそれぞれ、上、右、下、左のエッジから素材の中心までのピクセル数/パーセンテージを表します。注: カット値ピクセルとパーセンテージの 2 つの単位のみを受け入れます。また、ピクセル
単位は省略する必要があります。つまり、数値またはパーセンテージのみが受け入れられます。たとえば、border-image-slice: 10 10 30 10 は、画像素材が次のパターンに従って切り取られることを意味します:

border-image-width

border-image-width は、ボーダー素材の幅を設定するために使用されます。 border-image-width プロパティと border-width プロパティが同時に設定されている場合、ボーダーの実際の幅は、 border-width プロパティ。このとき、border-image-width属性がborder-width属性より小さい場合、ボーダー画像はボーダーの外側に沿って配置され、内側は空白のまま
パディングを形成します。効果; border-image-width 属性が border-width 属性よりも大きい場合、以下に示すように、境界線イメージは境界線の外側に沿って分散され、内部テストでオーバーフローします。 🎜>

border-image-repeat