border-image-width CSS プロパティとは
トピック：境界線画像の幅を指定する 事ができる このプロパティの値が要素のborder-widthよりも大きい場合、境界画像はパディング領域 (又は、コンテンツ領域) の縁に向けて拡張される
プロパティ border-image-width
実例 コード 1
サンプル コードを試す #webref{
border-image-source: url("../webref.jpg");
border-image-width: 10px;
}
border-image-width プロパティは下記の値のリストにある1つから4つの値を使用して指定することができる- 値が1つ指定された 、場合、全4辺に同じ幅が 適用される 。
- 値が2つ指定された 、場合、1つ目の幅が上下に、2つ目が左右に 適用される 。
- 値が3つ指定された 、場合、1つ目の幅が上に、2つ目が左右に、3つ目が下に 適用される 。
- 値が4つ指定された 、場合、幅は上、右、下、左の順 (時計回り) で 適用される 。
プロパティ 定義と使用法
| デフォルト値・初期値 : | 1 |
|---|
| 適用対象 : | 全要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用される |
|---|
| 継承 : | 不可 |
|---|
| パーセンテージ : | ボーダー画像領域の幅または高さを参照 |
|---|
| メディア : | visual |
|---|
CSS Version | CSS3 |
|---|
| 計算値 : | 指定通り。ただし相対的 length は絶対的 length に変換 |
|---|
| JavaScript 構文 | object.style.borderImageWidth="20px" |
|---|
| アニメーションの種類 : | 個別 |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | border-image-width: number |% |auto |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
length | border-widthのサイズを指定する長さ単位（px） |
number | デフォルト値1.対応するborder-widthの倍数を表す |
% | 境界画像領域のサイズを参照 ：水平オフセットの領域の幅、垂直オフセットの高さ |
auto | 指定すると、幅は対応するイメージスライスの本来の幅または高さです |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| border-image-width | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯15 | フルサポート◯12 | フルサポート◯13 | フルサポート◯11 | フルサポート◯15 | フルサポート◯6 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| border-image-width | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | 不明 | 不明 | フルサポート◯あり | フルサポート◯14 | 不明 | 不明 | 不明 |
|---|
CSS border-image-width | CSS プロパティ 値| 意味 使い方 実例 – WebRef