Use CSS3 to implement background color gradient

This articleIntroductionUsing CSS3 to achieve background color gradient

CSS gradient color concept:

CSS gradient color (Gradients) allows us to use a color gradient The effect modifies a space - transitioning from one color to another - filling the space. There are two forms of gradient colors: linear (linear gradient) and radial (circular gradient). It is obvious that CSS gradient color (Gradients) technology produces a visual pattern effect, and achieving this visual effect is very simple and can be achieved through simple programming. CSS gradients were introduced very early in CSS3, but the promotion of this technology took a long time.

Basic syntax of CSS gradient technology:

Unified code format

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

The first parameter is the gradient starting point or angle. The second parameter is a color stop. At least two colors are required (starting point and end point), and you can add any color to increase the richness of the color gradient. The definition of the color stop point can be a color, or a color plus a percentage:

/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)

The following code Basically covers all situations of top-down color gradients:

{	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), 
　　　　　color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);	
　　　　　/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);	
　　　　 /* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
　　　　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";	
　　　　 /* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

CSS gradient color (Gradients) technology also supports gradient directions with angles, such as 45-degree angle gradient:

/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), 
　　　　　color-s top(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

CSS color gradient (Gradients) technology is valuable, but sometimes difficult to implement. Sometimes you've already implemented the gradient you want, and browser support can become an issue. Here are some suggestions for using CSS color gradients (Gradients):

• Want your CSS color gradients (Gradients) to show a certain degree of transparency? Use rgba colors.

• Use the background color as the bottom to prevent you from accidentally not having any color when the browser does not support it.

• Firefox and Google Chrome both support repeating-linear-gradient and repeating-radial-gradient. The usage is:

background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);

background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);

Effect:

Basic color linear gradient, top to bottom

Basic color linear gradient, 45 degree angle (Chrome, Safari, Firefox, IE10, Opera)

The above is the detailed content of Use CSS3 to implement background color gradient. For more information, please follow other related articles on the PHP Chinese website!