カテゴリー:
CSS
閲覧数:704 配信日:2013-06-16 08:02
導入経緯
・ボーダー嫌いなのに今回導入した理由は、それしか思いつかなかったから
困っていること
・画像を「rotate animation」する際、左下に「rotate」分の空きが生じる
やりたいこと
・この空きを見えなくなるようにしたい
background-position
案1
・空き分だけ、「rotate animation」対象画像の位置をずらせばよいのではないか？
結果は？
・「background-position」で、左上固定や、中央指定してもダメ
・「:after疑似要素」にも指定したけど、それでもダメ
→挫折
border
案2
・ボーダー敷いて、生じた「rotate」分の空きを誤魔化す
・実際に試してみたら、外側に線が引かれるため、空きが隠れない
→内側に線を引きたい
box-shadow
案3
・結局、この案を採用
・だけど、妥協案であることには違いない
・線で誤魔化さなくても、「rotate」分の空きを隠す方法は絶対あると思うんだけどなァー