css3 border-image_html/css_WEB-ITnoseの詳細説明
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-repeatパディングを形成します。効果; border-image-width 属性が border-width 属性よりも大きい場合、以下に示すように、境界線イメージは境界線の外側に沿って分散され、内部テストでオーバーフローします。 🎜>
border-image-repeat 属性は、上下の
リピート形式を設定するために使用されます。 、左側と右側 (つまり、4 つのマテリアル ブロック 2、4、5、7) のストレッチ リピート ラウンド スペースにはそれぞれ 4 つの値があります。stretch: ストレッチを指定します。境界線の背景画像を塗りつぶすメソッド。
round: 境界線の背景画像を塗りつぶすタイリング方法を指定します。画像は、境界線全体にちょうど収まるまで、境界線のサイズに応じてそのサイズを動的に調整します。
border-image-outset
border-image-outset 属性には、border-image を元の位置に対して外側に押し出す効果があります。 image- offset 属性は、border-image をオーバーフローさせますが、
はボックス モデル全体のサイズに影響を与えないため、この属性を設定するときは、要素間の相互干渉を防ぐことに特別な注意を払う必要があります。以下に示すように
フォローアップ
border-image は css3 属性であるため、互換性の問題があるため、
-webkitなどの前にプロパティを設定する必要があります。
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7295
9
1622
14
1342
46
1259
25
1206
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
HTML5＆lt; meter＆gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素？
Mar 12, 2025 pm 04:08 PM
HTML5＆lt; meter＆gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素？
