参考手册
CSS3 渐变
CSS3 阴影效果

CSS3 径向渐变

CSS3 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。CSS3 定义了两种渐变类型：

  • 线性渐变（向下/向上/向左/向右/对角线）
  • 径向渐变（由其中心定义）

CSS 径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

语法
  1. background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。

径向渐变-均匀间隔的色标（默认）

下面的例子展示了带有均匀间隔的色标的径向渐变：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #grad1 {
  6.   height: 150px;
  7.   width: 200px;
  8.   background-color: red; /* 针对不支持渐变的浏览器 */
  9.   background-image: radial-gradient(red, yellow, green);
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <h1>径向渐变 - 均匀间隔的色标</h1>
  17. <div id="grad1"></div>
  19. </body>
  20. </html>
运行一下
径向渐变-不同间距的色标

下面的例子展示了一个径向渐变，其色标之间的间隔不同：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #grad1 {
  6.   height: 150px;
  7.   width: 200px;
  8.   background-color: red; /* 针对不支持渐变的浏览器 */
  9.   background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <h1>径向渐变 - 不均匀间隔的色标</h1>
  17. <div id="grad1"></div>
  19. </body>
  20. </html>
运行一下

设置形状

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。下面的例子展示了一个圆形的径向渐变：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #grad1 {
  6.   height: 150px;
  7.   width: 200px;
  8.   background-color: red; /* 针对不支持渐变的浏览器 */
  9.   background-image: radial-gradient(red, yellow, green);
  10. }
  12. #grad2 {
  13.   height: 150px;
  14.   width: 200px;
  15.   background-color: red; /* 针对不支持渐变的浏览器 */
  16.   background-image: radial-gradient(circle, red, yellow, green);
  17. }
  18. </style>
  19. </head>
  20. <body>
  22. <h1>径向渐变 - 形状</h1>
  24. <h2>椭圆（默认）：</h2>
  25. <div id="grad1"></div>
  27. <h2>圆：</h2>
  28. <div id="grad2"></div>
  30. </body>
  31. </html>
运行一下

使用大小不同的关键字

size 参数定义渐变的大小。它可接受四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

设置了不同 size 关键词的径向渐变：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #grad1 {
  6.   height: 150px;
  7.   width: 150px;
  8.   background-color: red; /* 针对不支持渐变的浏览器 */
  9.   background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
  10. }
  12. #grad2 {
  13.   height: 150px;
  14.   width: 150px;
  15.   background-color: red; /* 针对不支持渐变的浏览器 */
  16.   background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
  17. }
  19. #grad3 {
  20.   height: 150px;
  21.   width: 150px;
  22.   background-color: red; /* 针对不支持渐变的浏览器 */
  23.   background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
  24. }
  26. #grad4 {
  27.   height: 150px;
  28.   width: 150px;
  29.   background-color: red; /* 针对不支持渐变的浏览器 */
  30.   background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
  31. }
  32. </style>
  33. </head>
  34. <body>
  36. <h1>径向渐变 - 不同的 size 关键字s</h1>
  38. <h2>closest-side:</h2>
  39. <div id="grad1"></div>
  41. <h2>farthest-side:</h2>
  42. <div id="grad2"></div>
  44. <h2>closest-corner:</h2>
  45. <div id="grad3"></div>
  47. <h2>farthest-corner (默认):</h2>
  48. <div id="grad4"></div>
  50. </body>
  51. </html>
运行一下

重复径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #grad1 {
  6.   height: 150px;
  7.   width: 200px;
  8.   background-color: red; /* 针对不支持渐变的浏览器 */
  9.   background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <h1>重复的径向渐变</h1>
  17. <div id="grad1"></div>
  19. </body>
  20. </html>
运行一下

CSS 渐变属性

下表列出了 CSS 渐变属性：

属性描述
background-image为一个元素设置一幅或多幅背景图像。
CSS3 渐变
CSS3 阴影效果

分类导航