序章

プロジェクトでCSSボーダーを使用した可能性があります。 これにより、border-styleborder-color、およびborder-widthを設定できました。 現在、最新のWebブラウザーでは、境界線の画像とグラデーションの境界線を使用できます。

この記事では、border-image-sourceborder-image-sliceについて説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

  • CSSにある程度精通している必要があります。 復習が必要な場合は、CSSを使用してWebサイトを構築する方法チュートリアルシリーズの恩恵を受けることができます。
  • border-imagelinear-gradientradial-gradient、およびconic-gradientをサポートする最新のWebブラウザー。

例の設定

まず、いくつかのディメンションを確立し、コンテンツを中央に配置するboxクラスについて考えます。

.box {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

次に、このクラスをdiv要素で使用します。

<div class="box">
  Example box without a border.
</div>

これで、新しいwith-borderクラスを作成できます。

.with-border {
  border-color: black;
  border-style: solid;
  border-width: 30px;
}

次に、それをマークアップに追加します。

<div class="box with-border">
  Example box with a border.
</div>

このコードは以下をレンダリングします:

境界線のあるボックスの例。

次に、この例に基づいて、境界線の画像とグラデーションの境界線を作成します。

ボーダー画像の使用

まず、新しいwith-border-imageクラスを作成します。

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(/url/to/some/fancy/image.jpg);
  border-image-slice: 60 30;
}

境界線の画像が通常の境界線スタイルに置き換わるため、要素に通常の境界線を適用する必要があることに気付くでしょう。

border-image-sourceは、ソース画像を指定します。ソース画像は、ラスターまたはベクターベースの画像(SVG)へのURL、またはデータURIにすることができます。

border-image-sliceは、画像を9つの領域に分割するスライスプロセスを指します。 最大4つの値を定義することにより、画像のどの部分が境界線の一部として繰り返されるかを指定します。

次に、それをマークアップに追加します。

<div class="box with-border-image">
  Example box with a border image.
</div>

このコードは以下をレンダリングします:

ボーダー画像のあるボックスの例。

border-image-sliceを完全に理解したい場合は、Codropsによる優れたリファレンス記事とCSS-Tricksによる別の記事をご覧ください。

短縮プロパティの使用

border-image-sourceborder-image-sliceの両方の値を一度に指定するための省略形のプロパティがあります:border-image

前の例で個別のプロパティを使用した方法を思い出してください。

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(/url/to/some/fancy/image.jpg);
  border-image-slice: 60 30;
}

これは、省略形のプロパティで書き直された同じ例です。

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image: url(/url/to/some/fancy/image.jpg) 60 30;
}

これらの値は同等です。

グラデーションの境界線を使用する

サポートされているグラデーションには、線形、放射状、円錐曲線の3種類があります。 グラデーションを使用する場合は、border-image-sliceの値を1に指定する必要があります。

線形グラデーションの使用

線形グラデーションは次のとおりです。

.with-linear-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}

これをマークアップに追加します。 このコードは以下をレンダリングします:

線形グラデーションのボックスの例。

これで、linear-gradientを使用した線形グラデーションの要素ができました。

放射状グラデーションの使用

ラジアルグラデーションの例を次に示します。

.with-radial-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}

これをマークアップに追加します。 このコードは以下をレンダリングします:

放射状のグラデーションのあるボックスの例。

これで、radial-gradientを使用した線形グラデーションの要素ができました。

円錐曲線を使用する

円錐曲線グラデーションの例を次に示します。

.with-conic-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
}

これをマークアップに追加します。 このコードは以下をレンダリングします:

円錐曲線のボックスの例。

これで、conic-gradientを使用した線形グラデーションの要素ができました。

結論

この記事では、border-image-sourceborder-image-sliceについて説明しました。

2020年現在、 border-imageを使用できますか?は、border-imageプロパティをサポートする99% ofの世界中のブラウザを示しています。 新しい機能を採用するときは、ターゲットオーディエンスのブラウザの使用を考慮に入れてください。

残念ながら、border-imageborder-radiusではまだ期待どおりに機能しません。 要素に境界線の半径とグラデーションの境界線を持たせたい場合は、背景画像と背景色のネストされた要素を使用してグラデーションの境界線画像の錯覚を与えるこれらのアプローチに興味があるかもしれません[X236X ]。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。