Naoki Otsu

border-imageをRetina対応させるときの備忘録

2016-09-18

border-image を使う時は、
http://border-image.com/
を使って CSS ソースを生成して貼り付ける事が多いのですが、
こちらで生成される CSS は Retina 対応してない素の画像サイズなので、
スマホ制作してる時とかは画像が大きくなってしまいます。

Retina 対応させる方法

Retina 対応する場合は、border-imageの数値は変えずに、
border-widthの値だけ、1/2 とかにすると良いので、
例えば、こうなっていたら ↓

border-width: 36px 40px 40px 44px;

こうすると良かったです ↓

border-width: 18px 20px 20px 22px;