html css双色径向渐变,css 径向渐变 -凯发k8官方网
css 径向渐变
css 径向渐变
a radial gradient is defined by its center.
to create a radial gradient you must also define at least two color stops.
句法
background-image: radial-gradient(shape sizeatposition, start-color, ..., last-color);
by default, shape is ellipse, size is farthest-corner, and position is center.
radial gradient - evenly spaced color stops (this is default)
the following example shows a radial gradient with evenly spaced color stops:
例子
#grad {
background-image: radial-gradient(red, yellow, green);
}
来试试吧 »
radial gradient - differently spaced color stops
the following example shows a radial gradient with differently spaced color stops:
例子
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
来试试吧 »
set shape
the shape parameter defines the shape. it can take the value circle or ellipse. the default value is ellipse.
the following example shows a radial gradient with the shape of a circle:
例子
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
来试试吧 »
use of different size keywords
the size parameter defines the size of the gradient. it can take four values:
closest-side
farthest-side
closest-corner
farthest-corner
例子
a radial gradient with different size keywords:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
来试试吧 »
repeating a radial-gradient
the repeating-radial-gradient() function is used to repeat radial gradients:
例子
a repeating radial gradient:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}
来试试吧 »
css gradient properties
the following table lists the css gradient properties:
property
描述
sets one or more background images for an element
总结
以上是凯发k8官方网为你收集整理的html css双色径向渐变,css 径向渐变的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 宁夏计算机专科大学排名,2019年民办学
- 下一篇： 抑郁症自测量表测试软件,快来测测抑郁--