CSSで画像の枠線を設定する方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2023-01-05 16:12:55

オリジナル

17187 人が閲覧しました

CSS では、border-image 属性を使用して画像の境界線を設定でき、要素に「border-image: 画像パス、切り取り幅、並べ方;」スタイルを追加するだけです。 border-image 属性を使用すると、背景画像を境界線に追加して、画像の境界線効果を実現できます。

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

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS の入門段階では、border-style 属性について学び、ボーダーには実線や点線などのいくつかの単純なスタイルしかないことも知りました。境界線に美しい背景画像を追加したい場合はどうすればよいでしょうか?

CSS3 では、border-image 属性を使用して境界線に背景画像を追加できます。すべての主要なブラウザの最新バージョンは、border-image 属性をサポートするようになりました。

構文:

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

説明:

border-image 属性は次のようにする必要があります。コンテンツの 3 つの側面を定義しました。

(1) 画像のパス。

(2) カット幅：四辺のカット幅を上端、右端、下端、左端の順（時計回り）に設定します。

(3) タイリング方法:repeat、round、stretch の 3 つの値があります。

このセクションのすべての例では、図に示されている 90px×90px の画像を境界線の背景画像として使用します。

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

コード例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

ログイン後にコピー

ブラウザのプレビューは以下のようになります。

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

分析:

プレビュー効果から、番号 1、3、7、9 が次の位置にあることがわかります。四隅はそのまま素直に四隅に位置します。次に、4 つの境界線 2、4、6、8 が連続してタイル化されます。

border-image属性についてまとめると以下のようになります。

(1) ボーダー背景画像を作る場合は4辺を作り、真ん中をくり抜く必要があります。。

(2) 境界線の背景画像の各辺の幅は、対応する境界線の幅 (つまり、border-width) と同じである必要があります。

#例: タイリング方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:170px;
            height:110px;
            line-height:110px;
            text-align: center;
            border:30px solid gray;
            margin-top:20px;
        }
        /*第1个div平铺方式为：repeat*/
        #div1{border-image:url(img/border.png) 30 repeat;}
        /*第2个div平铺方式为：round*/
        #div2{border-image:url(img/border.png) 30 round;}
        /*第3个div平铺方式为：stretch*/
        #div3{border-image:url(img/border.png) 30 stretch;}
    </style>
</head>
<body>
    <div id="div1">repeat</div>
    <div id="div2">round</div>
    <div id="div3">stretch</div>
</body>
</html>

ログイン後にコピー

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

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

# #分析:

border-image 属性には、repeat、round、stretch の 3 つのタイリング方法があります。

(1) 値がrepeatの場合は、小さな4辺の正方形が連続して繰り返され、要素以降の部分が切り取られることを意味します。

(2) 値が丸い場合は、4 辺の小さな正方形がカバーされることを意味します。境界線イメージは、完全にカバーされるように圧縮または引き伸ばされます。

(3) 値がストレッチの場合、4 辺の小さな正方形が辺の長さだけ引き伸ばされることを意味します。

border-image の派生サブ属性

border-image 属性を分離して、4 つの辺にそれぞれ対応する背景画像を設定できます。側面は表の通りです。

border-image の派生サブプロパティサブプロパティ説明border-top-image上境界線の背景画像を定義しますborder-bottom-image下境界線を定義します背景画像border-left-image左境界の背景画像を定義しますborder-right-image 適切な境界線の背景画像を定義します