ホームページ > 記事 > ウェブフロントエンド > css3 image border border-imageの使い方について
css3 image border border-imageの使い方について
- 不言オリジナル
- 2018-06-28 10:39:472377ブラウズ
この記事では、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 の構文
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
これらの構文の説明は非常に退屈に思えますが、これが最も理解しやすい例です。
ピクチャボーダー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 image border border-imageの使い方についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。