CSSで画像の枠線を設定する方法

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) と同じである必要があります。

#例: タイリング方法

      
  
repeat
 
round
 
stretch
  

ブラウザのプレビュー効果は次のとおりです:

# #分析:

border-image の派生サブ属性

css ビデオ チュートリアル)

以上がCSSで画像の枠線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。