这是一种添加背景渐变的解决方案，使用数据 URI 创建覆盖任何背景颜色的半透明图像。我已经验证它在 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;
}