Css3:background Gradient

Source: Internet
Author: User

Today to summarize the gradient, the gradient is divided into linear gradient, radial gradient. Shout, say less nonsense,

linear gradient:background:linear-gradient (Sets the gradient form, first color starting point, middle color point middle color position, end point color);

Linear: The type of gradient (linear gradient);

The form of the gradient: there are two ways of optional parameters-1, set the rotation angle, 0 degrees for the horizontal from left to right, 90 degrees is from top to bottom, starting from 0 degrees counter-clockwise transformation.

2, the use of keywords, left to represent from the right, the top represents from the top to the bottom, the same is right to the left, lefttop-from sitting up to the right, the same leftbottom,righttop,rightbottom.

The middle color and middle color position are optional parameters.

But to consider browser compatibility, let's write:

-webkit-gradient (linear,0 0,0 100%,from (starting color, to (end color));/*for Safari4+,chrome 2+*/

-webkit-linear-gradient (starting color, end color);/*for Safari 5.1+,chrome 10+*/

-moz-linear-gradient (starting color, end color);/*for firefox*/

-o-linear-gradient (starting color, end color);/*opera*/

Linear-gradient (start color, end color); */* Standard properties */

It's a hassle for IE, the old-fashioned.

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' Start color ', endcolorstr= "End Color"); /*ie6,ie 7*/

-ms-linear-gradient (starting color, end color);/*ie8*/

<div class= "Content1" ></div>

. Content1{width:500px;height:300px;border-radius:10%;background: #ade691;
Background:-webkit-linear-gradient (left, #88cfc3, #329e8c 30%, #096e5d); Background:-moz-linear-gradient (left,# 88CFC3, #329e8c 30%, #096e5d) background:filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #88cfc3 ', endcolorstr= ' #096e5d '); /* Ie6,ie7 */-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #88cfc3 ', endcolorstr= ' #096e5d Background:linear-gradient (Lleft, #88cfc3, #329e8c 30%, #096e5d; float:left;}
. Tit1{font-size:3em;font-weight:bold;color: #f00;}

Repetitive linear gradient: repeating-linear-gradient attribute to replace linear gradient linear-gradient;

<div class= "Content2" ></div>

. content2{width:500px;height:200px;
Background-image:-webkit-repeating-linear-gradient (red,green 40px, Orange 80px);
Background-image:repeating-linear-gradient (Red,green 40px, Orange 80px);}

Radial gradient:radial-gradient (Sets the center of the gradient, the gradient shape gradient size, the starting color value, the middle color value middle color position, the end color)

Gradient center, optional parameters, such as 30px 20px refers to the left 30px distance from the upper side 20px, can be pixels, can be a percentage, or it can be a keyword, the default is the central location.

Gradient shape, optional parameter, can take value circle or eclipse "default"

Gradient size, cyclic parameters, can be value

Closest-side :

Specifies that the radial gradient has a radius length from the center to the nearest edge of the center

Closest-corner :

Specifies the radius length of the radial gradient from the center to the nearest corner from the center point

Farthest-side :

Specifies the radius length of the radial gradient from the center to the edge farthest from the center

Farthest-corner :

Specifies the radius length of the radial gradient from the center to the point farthest from the center

contain :

Contains, specifying the radius length of the radial gradient to be the closest point from the center to the center of the circle. Similar to Closest-side

cover :

Overrides, specifying the radius length of the radial gradient from the center to the point farthest away from the center. Similar to Farthest-corner

Circle Farthest-corner Circular Gradient, ellipse Farthest-corner oval gradient

<div class= "Content3" ></div>

. content3{width:500px;height:200px;
Background-image:-webkit-radial-gradient (Circle,hsla (120,70%,60%,.9), Hsla (360,60%,60%,.9));
Background-image:radial-gradient (Circle,hsla (120,70%,60%,.9), Hsla (360,60%,60%,.9)); margin-top:20px;}

Css3:background Gradient

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.