带有渐变背景的图像角上的圆形边框被拉伸答案

【问题标题】：Rounded Borders on image corners with gradient background thats stretched带有渐变背景的图像角上的圆形边框被拉伸
【发布时间】：2011-05-16 06:35:25
【问题描述】：

我有数百张图片将被随机加载和显示，然后更改为另一张图片（有 4 个图片框，每个图片框显示一个特定的图片 10 秒，然后更改为另一个完全随机的图片。）

现在需要对这些图像进行四舍五入，但是我已经尝试了所有我能想到的方法。由于背景被拉伸（液体模板），我无法使用透明图像放置在带有圆角的图像上。

我尝试过 javascript 圆角图像角（js 角）（不适用于图像转换和太多延迟），尝试使用图像放置在顶部（看起来很可怕），css 圆角（需要更多跨浏览器）。我能想到的唯一方法是 PHP，但这确实是 CPU 密集型的，并且会有很多图像。

我正在寻找一些想法，可能是每个分辨率的不同背景图像和定位，而不是单个拉伸背景？但我宁愿不要将加载时间加倍。

有什么想法吗？

【问题讨论】：

【解决方案1】：

这很难解决，但 IE9 将在 2011 年支持 CSS 边框半径。当然，很多人会使用 IE7/8 相当长的时间，所以这不太理想。

这里提到了一种可能的黑客攻击：http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser。我没有尝试过，但我会在未来。

希望这会有所帮助，

詹姆斯

编辑：我不确定这是否会使您的图像弯曲，尽管它可能会 - 快速浏览源代码似乎 .htc 文件实际上是逐个像素地创建角半径。

【讨论】：

【解决方案2】：

嘿，试试this :) 对我来说很好... ;]

【讨论】：