検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >css3 border-image_html/css_WEB-ITnoseの詳細説明

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

WBOY
WBOYオリジナル
2016-06-21 09:03:541182ブラウズ

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

    border-image-repeat 属性は、上下の

    リピート形式
    を設定するために使用されます。 、左側と右側 (つまり、4 つのマテリアル ブロック 2、4、5、7) のストレッチ リピート ラウンド スペースにはそれぞれ 4 つの値があります。

    stretch: ストレッチを指定します。境界線の背景画像を塗りつぶすメソッド。

  • repeat: 境界線の背景画像を塗りつぶすタイリング方法を指定します。
    • 画像が境界線に達した場合、境界線を超えると切り捨てられます。

  • round: 境界線の背景画像を塗りつぶすタイリング方法を指定します。画像は、境界線全体にちょうど収まるまで、境界線のサイズに応じてそのサイズを動的に調整します。

  • space: 境界線の背景画像を塗りつぶすタイリング方法を指定します。画像は、境界線全体にちょうど収まるまで、境界線のサイズに応じて画像間の間隔を動的に調整します。

  • border-image-outset

    • border-image-outset 属性には、border-image を元の位置に対して外側に押し出す効果があります。 image- offset 属性は、border-image をオーバーフローさせますが、

    はボックス モデル
    全体のサイズに影響を与えないため、この属性を設定するときは、要素間の相互干渉を防ぐことに特別な注意を払う必要があります。

    以下に示すように

    フォローアップ

    border-image は css3 属性であるため、互換性の問題があるため、

    -webkit
    などの前にプロパティを設定する必要があります。

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：3 つのステップでアダプティブ Web デザインを完成_html/css_WEB-ITnose次の記事：3 つのステップでアダプティブ Web デザインを完成_html/css_WEB-ITnose

    関連記事

    続きを見る