CSS3 gradient is divided into: (1) linear gradient, linear gradient and then divided into duplicate; (2) a radial gradient, radial gradient is subdivided into a circular, elliptical radial gradation, radial gradient repeat (A, width and height is equal to the repetition circular radial gradient, B, is equal to the width and height are not repeated elliptical radial gradation) ** html codes **
`` `HTML: RUN
<! DOCTYPE HTML>
<HTML lang =" EN ">
<head >
<Meta charset = "UTF-. 8">
<title> CSS3 gradient summary </ title>
<style>
div {
width: 1000px; height: 400px; Color: White;
}
</ style>
</ head>
<body>
<div style = "background-Image: linear-gradient (to right, Red, Green, Blue, Purple, Black)">
. 1, a linear gradient (final position, gradient color, gradient color, gradient color ...) < br />
style = "background-Image: Linear-gradient (to right, Red, Green, Blue, Purple, Black)"
</ div>
<div style = "background-Image: repeating-Linear-gradient (Red, Green 50px, Blue 100px, Purple by 150px, Black 200px)">
2, [repeat] linear gradient (starting color, gradient color start position, gradient color begins position, the start position of the gradient colors ...) a
style = "background-Image: repeating-Linear-gradient (Red, Green 50px, 100px Blue, Purple by 150px, 200px Black)"
</ div>
<div style = "background-Image: radial-gradient (Red, Green, Blue, Purple, Black)">
. 3, a radial gradient (gradient color, gradient color, gradient color ...)
style = "background-Image: Radial-gradient (Red, Green, Blue, Purple, Black) "
</ div>
<div style =" background-Image: Radial-gradient (circle, Red, Green, Blue, Purple, Black) ">
. 4, [circle shaped] <br/> radial gradient (round, gradient color, gradient color, gradient color ...)
style = "background-Image:radial-gradient(circle,red,green,blue,purple,black)"
</div>
<div style = "background-Image: Radial-gradient (Ellipse, Red, Green, Blue, Purple, Black)">
. 5, [elliptical] radial gradient (oval, gradient color, gradient color, gradient color .. .) a
style = "background-Image: Radial-gradient (Ellipse, Red, Green, Blue, Purple, Black)"
</ div>
<div style = "background-Image: Radial-repeating-gradient (Red , Green 50px, 100px Blue, Purple by 150px, 200px Black) ">
a. 6, [repeat] radial gradient (starting color, gradient color start position, the start position of the gradient color, gradient color ... start position)
wide high repetition circular radial gradient is equal to, not equal width and height is repeated <br/> elliptical radial gradation
style = "background-image: repeating -radial-gradient (red, green 50px, blue 100px, purple 150px, black 200px) "
</ div>
</ body>
</ HTML>
` ``
66CSS3 various gradients
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10967004.html
Recommended
Ranking