#71 border-imageの値の設定が難解なので試してみる

直径10pxの円が9つ並んでいる画像でborder-imageを試した場合

border-imageの値は、最低限、画像urlとsliceとwidth、repeatがある。
画像urlとwidthはわかるけれど、sliceがよくわからない

まずはCSSを見てみる。左から画像url、slice、width、repeat

  .waku {
    border-image: url("./img/bd_img.png") 10 / 10px round;
  }

これだけで表示されるかと思いきや、border-style: solid;を一緒に指定しないと表示されなかった。結果はこんな感じ。

https://developer.mozilla.org/ja/docs/Web/CSS/border-image-sliceを見ると、sliceは、画像を領域に分割する座標とある。

幅10pxの円を100pxの領域（角領域と辺領域）に展開して、slice値が10の場合、だいたい円が10個表示されていたので、（領域÷画像URLの最小オブジェクトのサイズ）でslice値は求まるのかな。slice値が10のままで、width値を200pxにしたら、だいたい20個表示されていました。

ちなみに、slice値が10で、widthが20pxの場合、画像URLの最小オブジェクトのサイズ（この場合は円）の直径が20pxに伸びるので、slice値が10でも円は5個の表示になる。ややこしい。

そして、slice値を　10 5　のように複数指定すると、縦は10、横はその半分の表示のようになる。

.waku3 {
    border-image: url("./img/bd_img.png") 10 5 / 10px round;
  }

repeat値は、border-image-repeatプロパティの値で、repeat は単純繰り返し、round は繰り返し回数が整数倍になるように自動調整するとのこと。

いまいちピンとこないなぁ。

視覚的に試すなら下記

Border-image generator - CSS: Cascading Style Sheets | MDN

仕様

border-image - CSS: カスケーディングスタイルシート | MDN

わかりやすいサイト

CSS - border-image - とほほのWWW入門

ヘッダーはエドゥアール・マネのCat and Flower