CSS3 画像の境界線を学ぶのに役立つ記事

CSS3 border-image プロパティを使用すると、要素の周囲に画像の境界線を設定できます。

1. ブラウザのサポート

表内の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示します。

使用時には、数字の後に -webkit- または -moz- をプレフィックスとして付ける必要があります。

2. CSS3 の border-image プロパティ

CSS3 border-image プロパティを使用すると、要素の周囲の通常の境界線の代わりに使用する画像を指定できます。プロパティには 3 つの部分があります。

境界線として使用する画像。
画像をセグメント化する場所。
中間セクションを繰り返すか拡張するかを決定します。

次の画像 (「border.png」) を例に挙げます。

原則分析:

border-image プロパティは、画像を三目並べのボードのように 9 つのセクションに分割します。次に、コーナーをコーナーに配置し、中央のセクションを指定された順序で繰り返すか、引き伸ばします。

知らせ：

border-image が適切に機能するには、要素に border プロパティも設定されている必要があります。

1.画像の中央部分を繰り返して境界線を作り、画像をフレームとして使います

CSSコード:

<!DOCTYPE CSS>

<CSS lang="ja">

<ヘッド>

  <メタ文字セット="UTF-8">

  <title>プロジェクト</title>

</head>

<本文>

  <p id="borderimg">ここでは、画像の中央を拡張して境界線を作成します。</p>

  <p>元の画像はこちらです:</p><img src="img/border.png">

</本文>

</CSS>

コードは次のとおりです。

#境界線{

    境界線: 10px 透明の実線;

    パディング: 15px;

    -webkit-border-image: url(img/border.png) 30 ラウンド; /* Safari 3.1-5 */

    -o-border-image: url(img/border.png) 30 ラウンド; /* Opera 11-12.1 */

    border-image: url(img/border.png) 30ラウンド;

}

2. 画像の中央を延長して境界線を作成します。写真を境界線として使用します。

コード例:

#境界線{

                境界線: 10px 透明の実線;

                パディング: 15px;

                -webkit-border-image: url(img/border.png) 30 ストレッチ;

                /* Safari 3.1-5 */

                -o-border-image: url(img/border.png) 30 ストレッチ;

                /* オペラ 11-12.1 */

                境界線画像: url(img/border.png) 30 ストレッチ;

            }

注: border-image プロパティは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat の略語です。

1. 異なるスライス値

スライスの値によって境界線の外観が完全に変わります。

例1

border-image: url(border.png) 50ラウンド;

#境界線画像1 {

境界線: 10px 透明の実線;

パディング: 15px;

-webkit-border-image: url(img/border.png) 50 ラウンド;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 50 ラウンド;

/* オペラ 11-12.1 */

border-image: url(img/border.png) 50ラウンド;

}

例2

border-image: url(border.png) 20% 丸み;

#境界線画像2 {

境界線: 10px 透明の実線;

パディング: 15px;

-webkit-border-image: url(img/border.png) 20% 丸め;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 20% 丸め;

/* オペラ 11-12.1 */

border-image: url(img/border.png) 20% 丸型;

}

例3

border-image: url(border.png) 30% 丸型;

コードは次のとおりです。

#境界線画像3 {

境界線: 10px 透明の実線;

パディング: 15px;

-webkit-border-image: url(img/border.png) 30% 丸型;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 30% 丸め;

/* オペラ 11-12.1 */

border-image: url(img/border.png) 30% 丸型;

}

結論

この記事は CSS の基礎に基づいており、CSS 言語を使用して、画像の境界線の CSS 定義に関する知識ポイントを紹介します。基本的な属性の概念、border-image の使用方法、実際のアプリケーションで注意する必要がある問題から始まり、詳細な説明が行われます。実例のデモンストレーションを通して。これが CSS の学習に役立つことを願っています。

Python ウェブクローラーとデータマイニングについてさらに詳しく知りたい場合は、専門のウェブサイトをご覧ください: http://pdcfighting.com/

CSS3 の画像ボーダーを 1 つの記事で学習するこの記事はこれで終わりです。CSS3 の画像ボーダーに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript の 7 つのデータ型の詳細な説明

>>: HTML の基本必読---フォーム、画像ホットスポット、Web ページの分割と結合の詳細な説明