css3 border-image_html/css_WEB-ITnoseの詳細説明-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:03 AM

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 までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。