Revision 1133147 of border-image-slice

<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">概要</h2>

<p>CSS の <code>border-image-slice</code> プロパティは、{{cssxref("border-image-source")}} で定義されたボーダー画像を 4隅、4辺と中央の 9 つの領域に切り分けて、中央部分を非表示にします。</p>

<p><a href="/files/3814/border-image-slice.png" style="float: left; "><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height:132px; margin:1px; padding:1em; width:250px" /></a>4 つの値を与えて、画像を切り分ける線を動かします。値が 4 つ指定されていないときは、CSS の 4-値構文に当てはめて欠けた値が推測されます。</p>

<p>中央部分は描画されませんが、キーワード <code>fill</code> がセットされていれば描画されます。このキーワードはプロパティの他の値の前後、あるいは間のどこに置いても構いません。</p>

<p>{{cssxref("border-image-repeat")}}、{{cssxref("border-image-width")}}、{{cssxref("border-image-outset")}} は、ボーダー画像の使い方を定義するプロパティです。</p>

<p>簡略化プロパティ {{cssxref("border-image")}} は、このプロパティをデフォルトに戻すかもしれません。</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css">
/* border-image-slice: <em>slice</em> */
border-image-slice: 30%; 

/* border-image-slice: <em>horizontal</em> <em>vertical</em> */
border-image-slice: 10% 30%;

/* border-image-slice: <em>top</em> <em>horizontal</em> <em>bottom</em> */
border-image-slice: 30 30% 45;

/* border-image-slice: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
border-image-slice: 7 12 14 5; 

/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code><em>slice</em></code></dt>
 <dd>切り分ける線を決める、4 つのオフセットの {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。{{cssxref("&lt;number&gt;")}} はラスター画像では<em>ピクセル</em>を、ベクター画像では<em>座標</em>を表します。また、{{cssxref("&lt;percentage&gt;")}} 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は<code>100%</code> におさめられます。</dd>
 <dt><em>horizontal</em></dt>
 <dd>横に切り分ける線を決める、top および bottom の 2 つのオフセットの {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。{{cssxref("&lt;number&gt;")}} はラスター画像では<em>ピクセル</em>を、ベクター画像では<em>座標</em>を表します。また、{{cssxref("&lt;percentage&gt;")}} 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は<code>100%</code> におさめられます。</dd>
 <dt><em>vertical</em></dt>
 <dd>縦に切り分ける線を決める、right および left の 2 つのオフセットの {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。{{cssxref("&lt;number&gt;")}} はラスター画像では<em>ピクセル</em>を、ベクター画像では<em>座標</em>を表します。また、{{cssxref("&lt;percentage&gt;")}} 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は<code>100%</code> におさめられます。</dd>
 <dt><em>top</em></dt>
 <dd>top の切り分け線を決めるオフセットの {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。{{cssxref("&lt;number&gt;")}} はラスター画像では<em>ピクセル</em>を、ベクター画像では<em>座標</em>を表します。また、{{cssxref("&lt;percentage&gt;")}} 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は<code>100%</code> におさめられます。</dd>
 <dt><em>bottom</em></dt>
 <dd>bottom の切り分け線を決めるオフセットの {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。{{cssxref("&lt;number&gt;")}} はラスター画像では<em>ピクセル</em>を、ベクター画像では<em>座標</em>を表します。また、{{cssxref("&lt;percentage&gt;")}} 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は<code>100%</code> におさめられます。</dd>
 <dt><em>right</em></dt>
 <dd>right の切り分け線を決めるオフセットの {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。{{cssxref("&lt;number&gt;")}} はラスター画像では<em>ピクセル</em>を、ベクター画像では<em>座標</em>を表します。また、{{cssxref("&lt;percentage&gt;")}} 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は<code>100%</code> におさめられます。</dd>
 <dt><em>left</em></dt>
 <dd>left の切り分け線を決めるオフセットの {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。{{cssxref("&lt;number&gt;")}} はラスター画像では<em>ピクセル</em>を、ベクター画像では<em>座標</em>を表します。また、{{cssxref("&lt;percentage&gt;")}} 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は<code>100%</code> におさめられます。</dd>
 <dt><code>fill</code></dt>
 <dd>中央の画像スライスを背景画像より上に表示することを示すキーワードです。</dd>
 <dt><code>inherit</code></dt>
 <dd>4 つすべての値が、親要素の計算値を継承することを示すキーワードです。</dd>
</dl>

<h3 id="形式文法">形式文法</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds','#border-image-slice','border-image-slice')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>15.0</td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>