CSS3跨浏览器线性渐变 [英] CSS3 cross browser linear gradient

问题描述

以下代码的Opera和IE替代品将会是什么？

  background-image： webkit梯度（线性，右上，左下，从（＃0C93C0）到（#FFF））; 
 background-image：-moz-linear-gradient（right，＃0C93C0，#FFF）; 
  

注意，我测试了以下规则。所有浏览器都支持它们。但是它们是垂直梯度。任何人都可以帮助我把它们修改为水平的？

  background-image：-webkit-linear-gradient（top，＃0C93C0，#FFF） ; 
 background-image：-moz-linear-gradient（top，＃0C93C0，#FFF）; 
 background-image：-ms-linear-gradient（top，＃0C93C0，#FFF）; 
 background-image：-o-linear-gradient（top，＃0C93C0，#FFF）; 
 background-image：linear-gradient（top，＃0C93C0，#FFF）; 
  
 
 
解决方案
 
 image：-ms-linear-gradient（right，＃0c93C0，#FFF）; 
 background-image：-o-linear-gradient（right，＃0c93C0，#FFF）; 
 
所有实验性CSS属性都有一个前缀：
 
 
 
 
 
  -webkit  -  适用于Webkit浏览器（chrome，Safari）
 
 
  -moz  -   for FireFox 
 
 
  -o  -   for Opera 
 
             
 
 
 
 
使用右上角代替 right ，如果你想要一个不同的角度。 
 
 
  左 p>另请参阅：
 
 
 
 
 
 MDN： 线性渐变  
 
 
 
 
 
 h2> 
 
 
对于< IE10，您必须使用：
  / * IE7  -  * / filter：progid：DXImageTransform.Microsoft.Gradient（startColorStr ='＃0c93c0'，endColorStr ='＃FFFFFF'，GradientType = 0）; 
 / * IE8 + * / -ms-filter：progid：DXImageTransform.Microsoft.Gradient（startColorStr ='＃0c93c0'，endColorStr ='＃FFFFFF'，GradientType = 0）; 
  
 过滤器适用于IE6，IE7 IE8），而IE8建议使用 -ms-filter （必须引用该值），而不是 filter 。 
有关 Microsoft.Gradient 的更多详细文档，请访问http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx  
 
 
 
  -ms-filter 语法
 
 
 
由于您是IE的粉丝，我将解释 -ms-filter 语法：
  filter：progid：DXImageTransform.Microsoft.Gradient（
 startColorStr ='＃0c93c0'，/ *开始颜色* / 
 endColorStr ='＃FFFFFF'，/ *结束颜色* / 
 GradientType = 0 / * 0 =垂直，1 =水平梯度* / 
）; 
  
除了使用RGB HEX颜色，还可以使用ARGB颜色格式。 A表示alpha，FF表示不透明，而 00 表示透明。  GradientType 部分是可选的，整个表达式不区分大小写。
 
What will be Opera and IE alternatives of following code?
background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);
Note, I've tested following rules. All browsers supports them. But they are vertical gradients. Can anyone help me to modify them to horizontal ones? 
background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); 
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF); 
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF); 
background-image:      -o-linear-gradient(top, #0C93C0, #FFF); 
background-image:         linear-gradient(top, #0C93C0, #FFF);

解决方案
background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);
All experimental CSS properties are getting a prefix:


-webkit- for Webkit browsers (chrome, Safari)
-moz- for FireFox
-o- for Opera
-ms- for Internet Explorer
no prefix for an implementation which is in full accordance with the specification.


Use top right instead of right, if you want a different angle. Use left or right if you want a horizontal gradient.

See also:


MDN: linear-gradient


Internet Explorer

For <IE10, you will have to use:
/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
filter works for IE6, IE7 (and IE8), while IE8 recommends the -ms-filter (the value has to be quoted) instead of filter.
A more detailled documentation for Microsoft.Gradient can be found at: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

-ms-filter syntax

Since you're a fan of IE, I will explain the -ms-filter syntax:
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);
Instead of using a RGB HEX color, you can also use a ARGB color format. A means alpha, FF means opaque, while 00 means transparent. The GradientType part is optional, the whole expression is case-insensitive.

                        
这篇关于CSS3跨浏览器线性渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！