#78 border-imageが難解なので考えるのをやめた話

数か月前、border-imageを理解しようと、border-imageの値の設定が難解なので試してみるという記事で、いろいろ試したもののsliceプロパティがやっぱりわからん。

四隅が隅切りになっている額縁のデザインを可変にしたいと思ったもののデバイスによって崩れるし、お手上げ状態。

コード例

border-image: url("./img/frame.png") 80 / 10px round;

border-image: url("./img/frame2.png") 26% / 60px round;

slice値が80だとか、26%とかって、何やねん。
↓デモ（左２つが失敗例。右はジェネレーターを使用）

形もいびつだし、slice（画像を領域に分割する座標）が難解なので、いったん考えるのをやめてジェネレーターに頼ることにした。

ジェネレーター

境界画像作成ツール - CSS: カスケーディングスタイルシート | MDN

↑ Upload imageボタンから画像をupします。

境界画像作成ツールの画面

アップした画像の上にある白いガイドの線をマウスで動かせるので、動かしながらslice値（画像を領域に分割する座標）を決める

動かし終わると、ページ下部にコードが生成されるのでそれをコピーなどする。

コードはこんな感じ

border-image-slice:89 82 79 82;
border-image-width:20px 20px 20px 20px;
border-image-outset:0px 0px 0px 0px;
border-image-repeat:stretch stretch;
border-style:solid;

slice値は左から上右下左の順。いわゆるショートハンドの基本形と同じ。
こうやって見ると隅切りフレームの場合、
上から89px、右から82px、下から79px、下から82pxの座標を指定しているのだろうか。

四隅のborder-sliceはこんな感じで、border-image-repeatをstretchにすることで四隅以外のborderを可変に伸ばしている。

自力でslice値を考えるのをやめてジェネレーターを使ったけど、ジェネレーターの結果を整理するとようやくこのパターンのslice値は理解できたかも。