现在，您可以在CSS中轻松定义径向和线性渐变。不再需要在单独的软件中创建图像。它们仍然是浏览器内部生成的图像，因此您需要在背景属性或元素中定义它们，并且您可以灵活地选择方向和色标。
在这里，我们将探索定义径向渐变的语法。有关线性渐变，请参阅此post。
1/* Simplest Case */
2.box {
3 background: radial-gradient(black, white);
4}
5
6/* A circle as the center shape instead
7of an ellipse and a 3rd color stop */
8.box {
9 background: radial-gradient(circle, #211533, #211533,
10 #3e275f);
11}
12
13/* Control the size of the gradient */
14.box {
15 background: radial-gradient(farthest-corner at 10px 10px,
16 #211533 40%, #3e275f);
17}
18
19.box2 {
20 background: radial-gradient(
21 farthest-side circle at 10px 10px,
22 #211533 40%, #3e275f);
23}
不支持渐变的浏览器默认颜色
最好是定义一个较老的浏览器将依赖的默认基色：
1.box {
2 background: #211533;
3 background: radial-gradient(to top, #211533, #211533, #3e275f);
4}
浏览器支持
我是否可以从caniuse.com使用css-gradients？数据来支持主流浏览器的css渐变功能。