Cross-Browser CSS Gradient〖跨浏览器的CSS渐变〗

木叶

For Webkit Browsers


The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers.But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers:IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu ( demo ) using CSS gradient.
The following line of code is for webkit browsers such as Safari, Chrome, etc. It will display a lineargradient from top (#ccc) to bottom (#000).
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

木叶

For Firefox 3.6+
background: -moz-linear-gradient(top,  #ccc,  #000);
For Internet Explorer
The following filter wlil only be read by IE:
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#cccccc',endColorstr='#000000');
Cross-Browser CSS Gradient( demo )
Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn’t support the feature.
background: # 999 ;  /* for non-css3 browsers */ filter: progidXImageTransform.Microsoft.gradient(startColorstr= '#cccccc' , endColorstr= '#000000' );  /* for IE*/ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(# 000 ));  /*for webkit browsers */ background: -moz-linear-gradient(top,  #ccc,  # 000 );  /* for firefox 3.6+ */
gradient box
CSS Gradient Dropdown Menu
Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)
css gradient dropdown
Internet Explorer Limitati**
Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Final Remarks
Please note not all browsers support CSS gradient. To be safe,you shouldn’t rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
PS: in IE: filter: progidXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=’#cccccc’, endColorstr=’#000000′); for horizontal, and replace the 1 witha 0 for vertical.
not support Opera

qqshinideqq

搞错啊 这么多中国人

背上破包流浪

看不懂英文