如何在 Opera 中创建 CSS3 渐变？
我可以在 IE6/7/8/9/FF3.6+ 和 Chrome 中创建 CSS 渐变（见下文）。
我的问题是：
如何在 Opera 中创建渐变？
.gradient{
/*Mozilla Firefox 3.6*/
background-image: -moz-linear-gradient(top, #dcdcdc, #c6c6c6);
/*Webkit aka Google Chrome*/
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c6c6c6),color-stop(1, #dcdcdc));
/*Internet Explorer 6,7 and 8*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6');
/*Internet Explorer 8 only*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6')";
/* Opera */
/* ??? */
}
I can create CSS gradients in IE6/7/8/9/FF3.6+ and Chrome (see below).
My question is:
How would one create a gradient in Opera?
.gradient{
/*Mozilla Firefox 3.6*/
background-image: -moz-linear-gradient(top, #dcdcdc, #c6c6c6);
/*Webkit aka Google Chrome*/
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c6c6c6),color-stop(1, #dcdcdc));
/*Internet Explorer 6,7 and 8*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6');
/*Internet Explorer 8 only*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6')";
/* Opera */
/* ??? */
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
Opera 10.x 支持背景图像中的 SVG，并且 SVG 允许您以与 Firefox 和 Safari 的 CSS 扩展大致相同的方式进行渐变。
当您的元素在 10.0 及以下版本中也有边框时，Opera 的 SVG 背景支持似乎存在一些令人讨厌的错误，但从 10.5 开始，它似乎相当可靠（以我有限的经验）。
CSS
gradient.svg
如果您对 SVG 进行 url 编码，您还可以使用数据 url 将 SVG 直接包含在 CSS 文件中。 （例如，在Python 中，您可以通过删除换行符和不必要的空格，然后将文件的内容传递给
urllib.quote来实现这一点）。它有点不可读，但它可以节省 HTTP 请求，并且如果您的 CSS 文件中嵌入了多个 SVG 渐变，您应该会看到单个文件节省了一些带宽（假设您的 CSS 文件经过压缩）。
Opera 10.x supports SVG in background images, and SVG lets you do gradients in much the same way Firefox and Safari’s CSS extensions do.
Opera’s SVG background support seems to have some nasty bugs when your element also has borders in 10.0 and below, but as of 10.5 it seems reasonably solid (in my limited experience).
CSS
gradient.svg
You can also include the SVG directly in the CSS file, using a data url, if you url encode the SVG. (In e.g. Python, you can do this by removing newlines and unnecessary spaces, and then passing the file’s contents to
urllib.quote).It’s a bit unreadable, but it saves an HTTP request, and if you’ve got more than one SVG gradient embedded in your CSS file, you should see some bandwidth savings over individual files (assuming your CSS file is gzipped).
应该与 Mozilla 的相同，但具有 Opera 标识符：
适用于 Opera 11.10 及更高版本。
Should be the same as Mozilla's, but with the Opera identifier:
Works in Opera 11.10 and newer.
Dev.Opera 上发表了如何在 Opera (11.10+) 上使用线性渐变的文章。
http://dev.opera.com/articles/view/css3-线性-渐变/
On Dev.Opera has been published article how to use linear gradients on Opera (11.10+).
http://dev.opera.com/articles/view/css3-linear-gradients/
使用这个：
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));Use this one:
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));CSS3 渐变使用最新的语法（随着规范的发展，与 Firefox 更接近但不完全相同），目前正在 Opera Presto（我们的渲染引擎）中进行开发。它可能不会出现在 Opera 11 中，但可能会出现在之后的版本中。
CSS3 Gradients, using the latest syntax (closer but not exactly the same as Firefox, as the spec has evolved) are in development now in Opera Presto (our rendering engine). It likely wont make it for Opera 11, but will probably make it for the version after.
最新的 Opera 版本 (>=2042) 支持 CSS3 线性渐变。
Latest Opera builds (>=2042) supports CSS3 linear-gradient.
Opera 不支持 CSS3 渐变 (然而）。不过，您可以使用 box-shadow 来模拟它们。请参阅 http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/。
Opera does not support CSS3 gradients (yet). You can somehow emulate them using box-shadow, though. See http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/.
对于 Opera 浏览器
For Opera Browser
这是迄今为止最好的选择。我尝试了 SVG 方法，它不仅在代码中看起来很糟糕，而且最终导致背景在 Firefox 中消失。
感谢大家发帖。最近我还必须在 Opera 中实现渐变，这很痛苦。
That is by far the best option. I tried the SVG method and not only does it look awful in the code but it also ends up causing the background to dissapear in firefox.
Thanks everyone for posting. I had to recently implement gradients in Opera as well and it was a pain.