border-image
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
border-image は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。
試してみましょう
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
19px round;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
fill / 30px / 30px space;
border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
60;
<section id="default-example">
<div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: #000;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
メモ:
境界画像の読み込みに失敗したときのために、 border-style を指定してください。仕様では厳密には要求されていませんが、border-style が none または border-width が 0 の場合、境界画像を描画しないブラウザーもあります。
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* source | slice */
border-image: linear-gradient(red, blue) 27;
/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;
/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;
/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
/* グローバル値 */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;
border-image プロパティは以下に挙げた 1 つから 5 つの値で指定します。
メモ:
border-image-source の 計算値 が none であったり、画像が表示できなかったりした場合は、 border-style が代わりに表示されます。
値
<'border-image-source'>-
元となる画像です。
border-image-sourceを参照してください。 <'border-image-slice'>-
source の画像を領域に分割する座標です。4つまでの値が指定できます。
border-image-sliceを参照してください。 <'border-image-width'>-
境界画像の幅です。4つまでの値が指定できます。
border-image-widthを参照してください。 <'border-image-outset'>-
要素の縁から境界画像までの間隔です。4つまでの値が指定できます。
border-image-outsetを参照してください。 <'border-image-repeat'>-
source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。
border-image-repeatを参照してください。
アクセシビリティ
支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして
|
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
border-image =
<'border-image-source'> ||
<'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
<'border-image-repeat'>
<border-image-source> =
none |
<image>
<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<border-image-outset> =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
ビットマップ
この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが 3 つずつ並んだ 81 × 81 ピクセルの ".png" ファイルです。
HTML
<div id="bitmap">
この要素はビットマップベースの境界画像に囲まれています。
</div>
CSS
個々のダイヤモンドの大きさに一致するように、 3 で割れる 81 の値を使用するか、角と辺の領域を分割するための 27 を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 round に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。
#bitmap {
width: 200px;
background-color: #ffa;
border: 36px solid orange;
margin: 30px;
padding: 10px;
border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
round;
}
結果
グラデーション
HTML
<div id="gradient">
この要素はグラデーションの境界に囲まれています。
</div>
CSS
#gradient {
width: 200px;
border: 30px solid;
border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
padding: 20px;
}
結果
角丸の境界線
border-radius は境界画像に効果がありません。これは、 border-image-outset は画像を境界ボックスの外に置くことができるので、境界画像が境界領域でクリップされることに意味がないからです。境界画像を使用して角を丸めるには、画像自体の角を丸めて作成するか、グラデーションの場合は背景として描画する必要があります。次の例では、境界線を拡張する画像とパディング枠に使用する画像の 2 つの background-imageを使用する手法を示します。
HTML
<div id="rounded">
この要素は、角が丸められた境界線で囲まれています！
</div>
CSS
#rounded {
width: 200px;
/* Use transparent so the background image is visible */
border: 10px solid transparent;
padding: 20px;
border-radius: 20px;
background-image:
linear-gradient(white, white), linear-gradient(to right, cyan, lime);
background-origin: border-box;
background-clip: padding-box, border-box;
}
結果
メモ:
この用途に向けて新しい background-clip: border-area
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image |
ブラウザーの互換性
Loading…