[解決済み] IE9のborder-radiusと背景グラデーションのにじみについて

質問

IE9では、CSS3標準の角丸の定義を利用することで、角丸を処理することができるようです。 border-radius .

ボーダー半径のサポートはどうなっていますか と 背景のグラデーションは？はい、IE9はこの2つを別々にサポートすることになっていますが、この2つを混ぜるとグラデーションが角丸からはみ出します。

また、角を丸くしたボックスの下に影が黒い実線で表示されるという奇妙な現象が発生しています。

以下はIE9で表示した画像です。

この問題を回避するにはどうしたらよいでしょうか？

解決方法は？

これは、データURIを使用して、任意の背景色に重なる半透明の画像を作成し、背景のグラデーションを追加する1つの解決策です。 IE9でボーダー半径に正しくクリッピングされることを確認しています。 これはSVGベースの提案よりも軽量ですが、欠点として解像度に依存しないことが挙げられます。 もう一つの利点は、現在のHTML/CSSで動作し、追加要素でラッピングする必要がないことです。

ウェブ検索でランダムに20x20のグラデーションのPNGを取得し、オンラインツールを使ってデータURIに変換しました。 出来上がったデータURIは、SVGのCSSコードよりも小さく、ましてやSVGそのものよりも小さいのです! (条件付きスタイルやブラウザ固有のCSSクラスなどを使って、IE9だけに条件付きでこれを適用することもできます。) もちろん、PNGの生成はボタンサイズのグラデーションには効果的ですが、ページサイズのグラデーションには向いていません!

HTMLです。

<span class="button">This is a button</span>

CSSです。

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}