CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のborder-imageプロパティでボーダー画像を追加する方法

CSS3で要素にボーダー画像を追加するには、border-imageプロパティを使用します。このプロパティは、以下の5つの個別プロパティをまとめて指定できる一括指定（ショートハンド）プロパティです。

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

各サブプロパティの役割

  • border-image-source： ボーダーに使用する画像のパス（URL）を指定します
  • border-image-slice： 画像をどのように分割するかを数値またはパーセントで指定します
  • border-image-width： ボーダー画像の幅を指定します
  • border-image-outset： ボーダー画像をボーダーボックスの外側へどれだけはみ出させるかを指定します
  • border-image-repeat： 画像の繰り返し方法（repeat / round / stretch / space）を指定します

値の設定方法

これらの値は、次のような順序で一括して設定できます。

border-image: source slice width outset repeat | initial | inherit;

サンプルコード1

まずは基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
    border: 20px solid;
    padding: 20px;
    border-image: url(https://www.tutorialspoint.com/images/home_ai_python.png) 20 round;
}
</style>
</head>
<body>
<h1>PyTorch Tutorial</h1>
<p>PyTorch is an open source machine learning library for Python and is completely based on Torch.</p>
<p id="demo">It is primarily used for applications such as natural language processing.</p>
</body>
</html>

表示結果

CSS3のborder-imageプロパティでボーダー画像を追加する方法

サンプルコード2

続いて、sliceの値にパーセンテージを指定した別の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
    border: 20px solid;
    padding: 20px;
    border-image: url(https://www.tutorialspoint.com/images/home_pytorch.png) 40% round;
}
</style>
</head>
<body>
<h1>TensorFlow Tutorial</h1>
<p>TensorFlow is an open source machine learning framework for all developers. It is used for implementing machine learning and deep learning applications.</p>
<p id="demo">To develop and research on fascinating ideas on artificial intelligence, Google team created TensorFlow.</p>
</body>
</html>

表示結果

CSS3のborder-imageプロパティでボーダー画像を追加する方法

まとめ

border-imageプロパティを使うことで、単純な線や色だけでなく、任意の画像をボーダーとして装飾的に表示できます。sliceの値を調整することで画像の切り分け方を変えられ、repeatキーワードを「round」にすれば、ボーダーの長さに合わせて画像がきれいに繰り返し配置されます。Webサイトのデザインに個性を持たせたい場合にぜひ活用してみてください。

  1. CSS3で複数の背景画像を追加する方法

    CSS3では、background-imageプロパティを使うことで、1つの要素に複数の背景画像を簡単に追加できます。各背景画像はカンマ（,）で区切って指定し、表示順序は先に書いたものが前面に、後ろに書いたものが背面に配置されます。 さらに、background-positionやbackground-repeatなどの関連プロパティも、背景画像と同じ順番でカンマ区切りで指定することで、それぞれの画像に対して個別の設定が可能です。 サンプルコード 以下は、CSS3で複数の背景を追加する具体例です。 <!DOCTYPE html> <html> <head>

  2. CSSのborder-imageプロパティで境界線画像を作成する方法

    CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。 border-imageプロパティの基本 border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。 画像のURL … 境界線に使用する画像をurl()で指定します。 スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定