CSS 3 gradient and CSS 3 gradient

CSS 3 gradient and CSS 3 gradient

CSS3 Gradient is divided into linear-gradient (linear gradient) and radial-Gradient (radial gradient ). Remember that the gradient is not an attribute of CSS3, but an attribute value. Although it is not specified in CSS3 that the gradient is for the background, however, I have learned that only the background can apply the gradient attribute (Background-image is also supported).

We will explain the basic usage of the two gradient directly through two instances:Share the best UI front-end framework!

Linear gradient linear-gradient:

. Code

1. Background:-moz-linear-gradient (left, # ace, # f96);/* Mozilla */
2. Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96);/* Old gradient for webkit */
3. Background:-webkit-linear-gradient (left, # ace, # f96);/* new gradient for Webkit */
4. Background:-o-linear-gradient (left, # ace, # f96);/* Opera11 */

 

The-Webkit-gradient is the old version of webkit kernel browser.

The effect is as follows:

 

Radial gradient radial-gradient: share the best UI front-end framework!

. Code

1. Background:-moz-radial-gradient (# ace, # f96, # 1E90FF );
2. Background:-webkit-radial-gradient (# ace, # f96, # 1E90FF );

 

 

Effect:

 

Internet ExplorerGradientThe support of is significantly different from that of other modern browsers. We will go to <CSS3 radial gradient (radial-gradient)> and <CSS3 linear gradient (linear-gradient)> the two articles are described separately.

Linear gradient in CSS3: What does the linear-gradient parameter look like?

There are three parameters:
1. The parameter indicates the gradient direction.
A) to + direction keyword, such as: to right, gradient from left to right; to left bottom gradient from top right to bottom left.
B) The specific angle value. For example, if it is set to 90deg, it is equivalent to "to right" and "to the right ".
2. Start color
3. End color
You can watch more videos like video.sina.com.cn/...776332.

Css can achieve a gradient color of the background. You can only use colors instead of images.

To be compatible with multiple browsers, you must write the corresponding CSS for each browser. Browsers with low versions can only use images as the background.
The following figure shows gradient support for the five browsers.
<Style type = "text/css" media = "screen">
# Gradient {
Width: 200px;
Height: 200px;
/* If the browser does not support gradient, use the image as the background */
Background: url(gradient.jpg );
/* Webkit: Safari 4-5, Chrome 1-9 */
Background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (# ff6600), to (#339900 ));
/* Webkit: Safari 5.1 +, Chrome 10 + */
Background:-webkit-linear-gradient (top, # ff6600, #339900 );
/* Firefox 3.6 + */
Background:-moz-linear-gradient (top, # ff6600, #339900 );
/* Operators' 11.10 + */
Background:-o-linear-gradient (top, # ff6600, #339900 );
/* IE 10 */
Background:-ms-linear-gradient (top, # ff6600, #339900 );
/* IE <10 */
/* Note: This line must be written at the end */
FILTER: progid: DXImageTransform. Microsoft. Gradient (startColorStr = # ff6600, endColorStr = #339900 );}
</Style>
<Div id = "gradient"> </div>
All test results in IE6, IE8, FF3.6, FF 4, Chrome 12, Opera 11.11, and Safari 5.0.5 are displayed.