Home > Developer > Web Develop
CSS3 a radial gradient is a circular or elliptical gradient, and the color no longer fades in the direction of a straight line, but a gradient from a starting point along all directions.
Take Orange to red as an example, the simplest radial gradient is as follows:
<!DOCTYPE HTML><HTML><Head><title>Radial</title><MetaCharSet= "Utf-8" /><styletype= "Text/css"> *{padding:0;margin:0;}Div{width:200px;Height:200px;Border:1px solid #ccc;margin:100px;}Div{background:-webkit-radial-gradient (orange,red);background:radial-gradient (orange,red); }</style></Head><Body> <Div></Div></Body></HTML>
The effect is as follows:
Like a linear gradient, a radial gradient requires only three features: the center, start color, and end color.
If you need to make a circular gradient, add the keyword circle on that basis, as follows:
Background:-webkit-radial-gradient (circle,orange,red); background:radial-gradient (circle,orange,red);
Similarly, a circle is actually a special ellipse. So on the basis of this precedent, we just need to change the keyword to ellipse to turn the circular radial gradient into an elliptical radial gradient.
Background:-webkit-radial-gradient (ellipse,orange,red); background:radial-gradient (ellipse,orange,red);
In addition to using keywords, you can also specify the primary and secondary radii directly to make an elliptical gradient, as follows:
Background:-webkit-radial-gradient (200px 50px at center,orange,red), Background:radial-gradient (200px 50px at center, orange,red);
The effect is as follows:
The first one is the primary radius, and the second is the secondary radius.
You can also use percentages to represent the primary and secondary radii, whichever is the parent element's width and height, as follows:
Background:-webkit-radial-gradient (100% 25% at center,orange,red) and Background:radial-gradient (100% 25% at center, orange,red);
The actual effect is the same as the precedent.
In the example above we used the center keyword to locate the center of the circle, and we can actually use other keywords to locate the center of the circle, with the same property values as background-position . For example at Center is equivalent at 50% 50% , the center is in the middle of the box. The other property values are as follows;
Top Equals Center Top | 50% 0right equals Center Right | 100% 50%bottom equivalent to center bottom | 50% 100%left equivalent to center left | 0% 50%top left is equivalent to 0 0top right equivalent to 100% 0bottom right equivalent to 100% 100%bottom left equivalent to 0 100%
In conclusion, we can explicitly set each property value to make a circular radial gradient and an elliptical radial gradient, as follows:
<!DOCTYPE HTML><HTML><Head><title>Radial</title><MetaCharSet= "Utf-8" /><styletype= "Text/css"> *{padding:0;margin:0;}Div{width:200px;Height:200px;Border:1px solid #ccc;margin:10px;Border-radius:50%;float: Left;}. Circle{background:-webkit-radial-gradient (10em circle at center,orange,red);background:radial-gradient (10em circle at center,orange,red); }. Ellipse{background:-webkit-radial-gradient (10em 2em ellipse at center,orange,red);background:radial-gradient (10em 2em ellipse at center,orange,red); }</style></Head><Body> <Divclass= "Circle"></Div> <Divclass= "Ellipse"></Div></Body></HTML>
The effect is as follows:
Preliminary study on CSS3-radial gradient
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
