iOSアプリを作ったので公開申請しようと思ったんだけど、Androidアプリみたいに「アプリのサイトURL」的な項目を "http://www.yahoo.co.jp" で埋めておくと流石に怒られそうだな、と思ったのでちゃんとサイトを作ることにしました。
で、そのときにアプリのアイコン画像をサイトに載せるわけだけども、iOSのアイコンってなんか角が丸くて上の方が光った感じのものが多いじゃないですか。サイトでもアレを表示したいわけですが、自分の画像処理技術では無理＆仮に出来たとしても時間がかかることうけあいだったのでCSS3でふんばることにしました。
CSS3でフンフンする方法があることはなんとなく知っていたのですが、僕がもともと知っていた記事 ( iOSのホーム・スクリーンのアイコンをCSSでパクる - Weblog - Hail2u.net ) では動作サンプルがいつの間にか真っ白になっていたりしたので、結果としてはこちらの記事 ( CSSでiPhoneアイコン風ボタン: あみつづり ) を参考にさせて頂きました。
radial-gradientは位置指定の単位に%が普通に使えるので、レスポンシブWebデザイン（笑）なサイトの場合でも対応することが出来ます。
なんかこれだけ書いてもよくわからないと思うので、動くサンプル置いておきますね。
(追記)
このへん (IE10 のプレフィックスのない CSS3 グラデーション - IEBlog 日本語 - Site Home - MSDN Blogs) とかこのへん ( CSS Image Values and Replaced Content Module Level 3 ) 見てると、位置の指定はcenter -> at centerとかにしなきゃダメになるっぽいですね！
