border-image属性の使い方は？ border-image プロパティのチュートリアルの詳細な説明-CSSチュートリアル-php.cn

border-image属性の使い方は？ border-image プロパティのチュートリアルの詳細な説明

云罗郡主

リリース： 2018-10-23 16:06:49

転載

4028 人が閲覧しました

この記事の内容は、border-image 属性の使用方法についてです。 border-image 属性に関する詳細なチュートリアルが参考になると思います。

CSS入門チュートリアルでは、実線、点線、点線などのシンプルな数種類の枠線のみを使用した枠線スタイルborder-styleについて学びました。では、美しい背景画像を境界線に追加したい場合はどうすればよいでしょうか?

CSS3 では、border-image 属性を使用して境界線に背景画像を追加できます。

説明:

構文分析から、border-image 属性を使用して境界線の背景画像を設定するには、3 つのパラメーターを設定する必要があることがわかります。

(1) 画像パス;

(2) 切り取ったピクチャの幅(border属性の4辺の順序と同様に、上、右、下、左、時計回りの順で4辺の幅) ;

(3) 画像のタイリング方法;

次の画像を(90px×90px)要素の境界線の背景画像として使用したい場合はどうすればよいでしょうか。 (以下の小さな四角はそれぞれ 30px × 30px です)

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-image属性</title>
    <style type="text/css">
    #div1
    {
        width:210px;
        height:150px;
        border:30px solid gray;
        border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
        -webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
        -moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

ログイン後にコピー

border-image属性の使い方は？ border-image プロパティのチュートリアルの詳細な説明