border-image-width

by 2 contributors:

概要

CSS の border-image-width プロパティは、ボーダーの 4 辺それぞれについて、ボーダー画像のスライスを表示する幅を決めます。幅とは、ボーダー画像領域の上下左右の各辺からの、内向きの距離を表します。

  • 初期値1
  • 適用対象全要素。ただし border-collapsecollapseのときはテーブル要素内部にあるものを除く
  • 継承しない
  • 相対値の基準ボーダー画像領域の width または height
  • メディアvisual
  • 計算値length が指定されるとその絶対的 length、それ以外は指定通り
  • アニメーションの可否不可

構文

形式文法: [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width: width                      /* One-value syntax */       E.g. border-image-width: 3;
border-image-width: horizontal vertical        /* Two-value syntax */       E.g. border-image-width: 2em 3em;
border-image-width: top vertical bottom        /* Three-value syntax */     E.g. border-image-width: 5% 15% 10%;
border-image-width: top right bottom left      /* Four-value syntax */      E.g. border-image-width: 5% 2em 10% auto;

border-image-width: inherit

 

width
ボーダー 4 辺すべての画像の幅。1-値構文でのみ使われます。
horizontal
ボーダーの横に伸びる辺、top と bottom の画像の幅。2-値構文でのみ使われます。
vertical
ボーダー縦に伸びる辺、right と left の画像の幅。2-値構文と 3-値構文でのみ使われます。
top
ボーダーの top の辺の画像の幅。3-値構文と 4-値構文でのみ使われます。
bottom
ボーダーの bottom の辺の画像の幅。3-値構文と 4-値構文でのみ使われます。
right
ボーダーの right の辺の画像の幅。4-値構文でのみ使われます。
left
ボーダーの left の辺の画像の幅。4-値構文でのみ使われます。
inherit
4 辺すべてが親要素の計算値を継承することを示すキーワードです。

<length>
画像スライスの length を表します。絶対的、相対的どちらの length も使えます。負の値であってはいけません。
<percentage>
ボーダー画像領域の高さまたは幅に対する、画像スライスのパーセンテージを表します。負の値であってはいけません。
<number>
画像スライスに、要素の border-width プロパティの計算値の何倍の大きさを使うのかを指定します。負の値であってはいけません。
auto
画像の幅または高さが、その寸法の intrinsic なサイズにならなければならないことを示します。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15.0 13.0 (13.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 13.0 (13.0) 未サポート ? ?

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す