純粋なCSSで境界線画像とグラデーション境界線を追加する方法
序章
プロジェクトでCSSボーダーを使用した可能性があります。 これにより、border-style
、border-color
、およびborder-width
を設定できました。 現在、最新のWebブラウザーでは、境界線の画像とグラデーションの境界線を使用できます。
この記事では、border-image-sourceとborder-image-sliceについて説明します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- CSSにある程度精通している必要があります。 復習が必要な場合は、CSSを使用してWebサイトを構築する方法チュートリアルシリーズの恩恵を受けることができます。
border-image
、linear-gradient
、radial-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-source
とborder-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-source
とborder-image-slice
について説明しました。
2020年現在、 border-imageを使用できますか?は、border-image
プロパティをサポートする99% ofの世界中のブラウザを示しています。 新しい機能を採用するときは、ターゲットオーディエンスのブラウザの使用を考慮に入れてください。
残念ながら、border-image
はborder-radius
ではまだ期待どおりに機能しません。 要素に境界線の半径とグラデーションの境界線を持たせたい場合は、背景画像と背景色のネストされた要素を使用してグラデーションの境界線画像の錯覚を与えるこれらのアプローチに興味があるかもしれません[X236X ]。
CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。