关于新手小白如何10分钟入门会使用CSS渐变色(颜色渐变)

CSS 中的渐变指的是两种或多种颜色之间的平滑过渡,以前我们必须使用事先定义好的图像来实现渐变效果,在 CSS3 出现以后则简单了很多,CSS3 为实现渐变效果提供了一种灵活的解决方案。

通过 CSS3 您可以定义三种类型的渐变,分别为线性渐变(通过 linear-gradient() 函数创建)、径向渐变(通过 radial-gradient() 函数创建)和圆锥渐变(通过 conic-gradient() 函数创建)。另外,您还可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函数来创建重复渐变。

通过 CSS 创建的渐变不仅简单灵活,而且还省去了使用图像时所需的加载过程,节省了网页的加载时间。另外,通过 CSS 创建的渐变元素可以按任意比例放大或缩小,而且不会降低质量。

1. 线性渐变

线性渐变指的是颜色沿一条直线进行渐变(例如右上到下,从左到右等),要创建线性渐变,您至少需要定义两个色标(色标指的是想要平滑过渡的颜色),若要创建更加复杂的渐变效果,则需要定义更多的色标。创建线性渐变的基本语法如下:

linear-gradient(direction, color-stop1, color-stop2, …);

参数说明如下:

  • direction 可选值,定义渐变的方向(例如从左到右,从上到下),可以是具体角度(例如 90deg),也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向,例如:
    • to left:表示从右到左,相当于 270deg;
    • to right:表示从左到右,相当于 90deg;
    • to top:表示从下到上,相当于 0deg;
    • to bottom:默认值,表示从上到下,相当于 180deg;
    • to right bottom:表示从左上到右下;
    • to right top:表示从左下到右上;
    • to left bottom:表示从右上到左下;
    • to left top:表示从右下到左上。
  • color-stop1、color-stop2、…:表示定义的多个色标,在每个色标中除了可以定义颜色外,还可以通过数值加单位或者百分比的形式定义颜色的起止位置。

【示例】使用 linear-gradient() 函数定义线性渐变:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 210px;
  7. height: 50px;
  8. float: left;
  9. margin: 10px;
  10. }
  11. .one {
  12. background: linear-gradient(to right bottom, red, blue 70px);
  13. }
  14. .two {
  15. background: linear-gradient(190deg, #000, #FFF);
  16. }
  17. .three {
  18. background: linear-gradient(red, green, blue);
  19. }
  20. .four {
  21. background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class=“one”></div>
  27. <div class=“two”></div>
  28. <div class=“three”></div>
  29. <div class=“four”></div>
  30. </body>
  31. </html>

运行结果如下图所示:

1546354D1-0
图:linear-gradient() 函数演示

2. 径向渐变

径向渐变与线性渐变类型,不同之处在于径向渐变是由中心向外延申的渐变,您可以指定中心点的位置,也可以设置渐变的形状。定义径向渐变的基本语法如下所示:

radial-gradient(shape size at position, color-stop1, color-stop2, …);

参数说明如下:

  • at:一个关键字,需要放置在参数 position 的前面;
  • position:指定渐变起点的坐标,您可以使用数值加单位、百分比或者关键字(例如 left、bottom 等)等形式指定渐变起点的坐标,如果提供 2 个参数,那么第一个参数用来表示横坐标,第二个参数用来表示纵坐标,如果只提供一个参数,那么第二个参数将被默认设置为 50%,即 center;
  • shape:指定渐变的形状,可选值为 circle(圆形)、ellipse(椭圆);
  • size:指定渐变形状的大小,除了可以使用具体的数值来指定 circle、ellipse 的半径外,还可以使用下面所示的关键字来指定渐变形状的大小:
    • closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;
    • closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;
    • farthest-side:默认值,指定径向渐变的半径长度为从圆心到离圆心最远的边;
    • farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角。
  • color-stop1、color-stop2、…:表示定义的多个色标,在每个色标中除了可以定义颜色外,还可以通过数值加单位或者百分比的形式定义颜色的起止位置。

【示例】使用 radial-gradient() 函数定义径向渐变:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 210px;
  7. height: 100px;
  8. float: left;
  9. margin: 10px;
  10. border: 1px solid black;
  11. }
  12. .one {
  13. background: radial-gradient(circle at 50%, red, yellow, lime);
  14. }
  15. .two {
  16. background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);
  17. }
  18. .three {
  19. background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);
  20. }
  21. .four {
  22. background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class=“one”></div>
  28. <div class=“two”></div>
  29. <div class=“three”></div>
  30. <div class=“four”></div>
  31. </body>
  32. </html>

运行结果如下图所示:

1546352114-1
图:radial-gradient() 函数演示

3. 圆锥渐变

圆锥渐变类似于径向渐变,两者都有一个中心点作为色标的源点,不同的是圆锥渐变是围绕中心点旋转(而不是从中心点向往辐射),定义圆锥渐变的基本语法如下:

conic-gradient(from angle at position, start-color, …, last-color);

语法说明如下:

  • from:一个关键字,需要放置在参数 angle 之前;
  • angle:定义圆锥渐变的起始角度,可以为空,默认值为 0deg;
  • at:一个关键字,需要放置在参数 position 之前;
  • position:定义圆锥渐变锥心的坐标,您可以使用数值加单位、百分比或者关键字(例如 left、bottom 等)等形式指定锥心的坐标,如果提供 2 个参数,那么第一个参数用来表示横坐标,第二个参数用来表示纵坐标,如果只提供一个参数,那么第二个参数将被默认设置为 50%,即 center(居中);
  • start-color、…、last-color:表示定义的多个色标,在每个色标中除了可以定义颜色外,还可以通过百分比或者角度来定义颜色的起始位置。

【示例】使用 conic-gradient() 定义圆锥渐变:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 210px;
  7. height: 100px;
  8. float: left;
  9. margin: 10px;
  10. border: 1px solid black;
  11. }
  12. .one {
  13. background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
  14. }
  15. .two {
  16. background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);
  17. }
  18. .three {
  19. background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);
  20. }
  21. .four {
  22. background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class=“one”></div>
  28. <div class=“two”></div>
  29. <div class=“three”></div>
  30. <div class=“four”></div>
  31. </body>
  32. </html>

运行结果如下图所示:

1546353319-2
图:conic-gradient() 函数演示

4. 重复渐变

在 CSS 中,您还可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 等函数来分别创建线性渐变、径向渐变和圆锥渐变的重复渐变,所谓重复渐变就是指将渐变的过程重复多次,以铺满整个元素。

提示: repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函数的语法分别与 linear-gradient()、radial-gradient() 和 conic-gradient() 函数的语法相同。

【示例】使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 三个函数定义重复渐变:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 210px;
  7. height: 100px;
  8. float: left;
  9. margin: 10px;
  10. border: 1px solid black;
  11. }
  12. .one {
  13. background: repeating-linear-gradient(190deg, #000 0px 10px, #FFF 10px 20px);
  14. }
  15. .two {
  16. background: repeating-radial-gradient(circle 100px at 50%, red 0% 10%, yellow 10% 30%, lime 30% 40%);
  17. }
  18. .three {
  19. background: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
  20. }
  21. .four {
  22. background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class=“one”></div>
  28. <div class=“two”></div>
  29. <div class=“three”></div>
  30. <div class=“four”></div>
  31. </body>
  32. </html>

运行结果如下图所示:

1546353M3-3
图:重复渐变演示
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容