スマホサイトコーディングの覚え書き（右側アイコンとborderに背景画像を指定する飾り枠）

デモ：http://jsdo.it/Ituki/sJPv

#borderに背景画像を指定する飾り枠

##ジェネレーター
http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D

##レティナっぽい感じにする
BはAの２分の１を指定する

    border: Apx solid;
    -webkit-border-image: 背景画像 B repeat;
    border-image: 背景画像 B fill repeat;

※デモ2番目

#右側アイコン

##background-position: right XXpx XX
スマホ未対応。PCはIE9以上。
※デモ3番目

##background-position: calc(100%-XXpx) XX
Android4.3以下やiPhone5.1以下が未対応
http://caniuse.com/#search=calc

##background-position: right XX + background-origin: content-box;
display: blockの時に有効
※デモ4番目

##display: inline-blockにしたいとき
afterの背景画像でbackground-sizeを指定する。
※デモ5番目