CSS では、border-image 属性を使用して画像の境界線を設定でき、要素に「border-image: 画像パス、切り取り幅、並べ方;」スタイルを追加するだけです。 border-image 属性を使用すると、背景画像を境界線に追加して、画像の境界線効果を実現できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS の入門段階では、border-style 属性について学び、ボーダーには実線や点線などのいくつかの単純なスタイルしかないことも知りました。境界線に美しい背景画像を追加したい場合はどうすればよいでしょうか?
CSS3 では、border-image 属性を使用して境界線に背景画像を追加できます。すべての主要なブラウザの最新バージョンは、border-image 属性をサポートするようになりました。
構文:
説明:
border-image 属性は次のようにする必要があります。コンテンツの 3 つの側面を定義しました。
(1) 画像のパス。
(2) カット幅:四辺のカット幅を上端、右端、下端、左端の順(時計回り)に設定します。
(3) タイリング方法:repeat、round、stretch の 3 つの値があります。
このセクションのすべての例では、図に示されている 90px×90px の画像を境界線の背景画像として使用します。
コード例:
ブラウザのプレビューは以下のようになります。
分析:
プレビュー効果から、番号 1、3、7、9 が次の位置にあることがわかります。四隅はそのまま 素直に四隅に位置します。次に、4 つの境界線 2、4、6、8 が連続してタイル化されます。
border-image属性についてまとめると以下のようになります。
(1) ボーダー背景画像を作る場合は4辺を作り、真ん中をくり抜く必要があります。 。
(2) 境界線の背景画像の各辺の幅は、対応する境界線の幅 (つまり、border-width) と同じである必要があります。
#例: タイリング方法
repeatroundstretch
ブラウザのプレビュー効果は次のとおりです:
# #分析:
border-image 属性には、repeat、round、stretch の 3 つのタイリング方法があります。 (1) 値がrepeatの場合は、小さな4辺の正方形が連続して繰り返され、要素以降の部分が切り取られることを意味します。 (2) 値が丸い場合は、4 辺の小さな正方形がカバーされることを意味します。境界線イメージは、完全にカバーされるように圧縮または引き伸ばされます。 (3) 値がストレッチの場合、4 辺の小さな正方形が辺の長さだけ引き伸ばされることを意味します。border-image の派生サブ属性
border-image 属性を分離して、4 つの辺にそれぞれ対応する背景画像を設定できます。側面は表の通りです。説明 | |
---|---|
上境界線の背景画像を定義します | |
下境界線を定義します背景画像 | |
左境界の背景画像を定義します | |
適切な境界線の背景画像を定義します |
css ビデオ チュートリアル)
以上がCSSで画像の枠線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。