css3 image border border-imageの使用例を詳しく解説

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

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

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

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>

rree

デモ例1:

ピクチャーボーダーボーダー画像の使用法2: ボーダー画像のアダプティブループタイリング(円形)

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

#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;
}

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

デモ例 2

図の境界線 border-image 使用法 3: 境界線画像のストレッチとタイリング (ストレッチ)

「ストレッチ」は、境界領域を満たすように小さな画像を引き伸ばし、ループせずに、明らかに、境界線の画像が変形します。

#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;
}

rrree

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

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

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