css3 image border border-imageの使い方について

この記事では、CSS3で導入された数多くの新機能の中でも、一定の参考価値のあるcss3 image border border-imageの使い方を中心に紹介しますので、興味のある方はぜひ学んでみてください

CSS属性borderについては、すべてWEBのものだと思います。開発者 スタッフはとても馴染み深いです。 HTML 要素の境界線の幅、色、スタイルを設定して、HTML 要素に二重線、点線、破線などのさまざまな境界線を表示させることができます。しかし、どのように設定したとしても、これらはかなり原始的な方法です。 CSS3 以降、新しいプロパティ border-image が追加されました。これにより、HTML 要素を美しい小さな画像で囲み、画像の境界線として表示できるようになります。 border-image プロパティを使用すると、非常に美しい境界線スタイルを作成できます。

HTML5 の新しい入力タイプ、中国語フォント (Web フォント)、プレースホルダーなど、CSS3 で導入された多くの新機能の中でも、それらは非常に実用的で人気があり、例の前に非常に美しい境界線画像も引用しました。 , しかし、インターネット上で border-image を使用した画像がまだほとんどないのは、主に Google Chrome と Firefox が長い間この構文をサポートしているのに対し、IE11 はこの構文のみをサポートしているためだと思います。

Picture border border-image の構文

<&#39;border-image-source&#39;> || <&#39;border-image-slice&#39;> [ / <&#39;border-image-width&#39;> | / <&#39;border-image-width&#39;>? / <&#39;border-image-outset&#39;> ]? || <&#39;border-image-repeat&#39;>

これらの構文の説明は非常に退屈に思えますが、これが最も理解しやすい例です。

ピクチャボーダーborder-image 使い方1：ボーダー画像を周期的にタイル張りする（繰り返し）

この場合、ボーダー画像の画像がボーダー領域を埋めるように順番にタイル状に並べられます。

<p id="repeat">图片将会循环贴满边框区域</p>

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

デモ例1:

image border border-image 使用法2: ボーダー画像適応ループタイリング(円形)

上の写真を見たことがあるかもしれませんが、ボーダーですが非常に美しいですが、要素の幅または高さが境界線イメージの整数倍でない場合、最後の/最初のイメージが完全に表示されず、部分的にブロックされてしまい、非常に見苦しいという欠点があります。 CSS3 の設計者はこの問題をすでに考慮しており、round 属性値を使用することでこの状況を回避できます。ラウンドの機能は、境界画像をわずかに調整して、各画像を確実に表示できるようにすることで、見る楽しみを高めます。

<p id="round">图片将会贴满边框区域</p>

#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

デモ例2

ピクチャーボーダーborder-image 使用法3: ボーダー画像を引き伸ばして並べる(ストレッチ)

「ストレッチ」は小さな絵を引き伸ばすことです。ループせずに境界領域を埋めるには、明らかに境界画像が変形します。

<p id="stretch">图片将会拉伸贴满边框区域.</p>

#stretch { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

デモンストレーション例 3

明らかに、border-image 最初の使用法は、境界線が不完全な感じになる場合があるため、一般的に使用されるべきではありません。 2 番目と 3 番目の使用法にはそれぞれの利点があり、異なる美しさがあります。ここで使用されている境界線画像は実際には非常に単純です。絶妙なアートにより、より美しい境界線画像が作成され、以前の記事の例のように素晴らしい効果が得られます。これについては、以下でもう一度紹介します。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連おすすめ:

CSS3のborder-radiusを使って太極拳や恋愛模様を描く

CSS3での@keyframesアニメーションの実装

CSSバナー画像のレスポンシブ中央表示方法について

以上がcss3 image border border-imageの使い方についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。